JavaScript項(xiàng)目?jī)?yōu)化總結(jié)

1、JavaScript優(yōu)化總結(jié)分為以下幾點(diǎn)優(yōu)化前后對(duì)比優(yōu)化前優(yōu)化后代碼混亂，同樣功能的函數(shù)重復(fù)出現(xiàn)在多個(gè)地方。如果需要修改實(shí)現(xiàn)，需要找到所有的地方。牽一發(fā)而動(dòng)全身模塊化，提取公共接口組織為庫、結(jié)構(gòu)清晰、方便代碼重用、并且能夠游戲防止變量污染問題。JavaScript文件未壓縮，size比較大加載消耗網(wǎng)絡(luò)耗時(shí)，阻塞頁面渲染JavaScript公共庫文件使用UglifyJS壓縮： Size比較小優(yōu)化了網(wǎng)絡(luò)加載時(shí)間 壓縮混淆了代碼，在一定程度上保護(hù)代碼使用時(shí)需要加載多個(gè)單獨(dú)的JavaScript文件，增加了http請(qǐng)求數(shù)降低性能對(duì)公共庫合并壓縮在減少size的同時(shí)，減少http請(qǐng)求數(shù)缺乏文檔（讓后面的

2、開發(fā)者對(duì)已有功能不清楚，這在一定程度上造成前面說的，同樣功能的函數(shù)重復(fù)出現(xiàn)在多個(gè)地方）公共庫中每個(gè)類、函數(shù)、屬性都有說明文檔 模塊化（類編程）：代碼清晰、有效防止變量污染問題、代碼重用方便擴(kuò)展等； JavaScript壓縮混淆：減少size優(yōu)化加載時(shí)間，混淆保護(hù)代碼； JavaScript文件合并：減少http請(qǐng)求優(yōu)化網(wǎng)絡(luò)耗時(shí)提升性能； 生成文檔：方便公共庫的使用，查找接口方便。模塊化（類編程）對(duì)于靜態(tài)類來說JavaScript實(shí)現(xiàn)比較簡(jiǎn)單，使用Object直接量就已經(jīng)夠用了；但是要?jiǎng)?chuàng)建實(shí)例化、可繼承經(jīng)典的類需要做一番工作。因?yàn)镴avaScript是基于原型的（prototype-based）

3、編程語言，并沒有包含內(nèi)置類的實(shí)現(xiàn)（它沒有訪問控制符，它沒有定義類的關(guān)鍵字class，它沒有支持繼承的extend或冒號(hào)，它也沒有用來支持虛函數(shù)的virtual等），但是我們通過JavaScript可以輕易地模擬出經(jīng)典的類。靜態(tài)類根據(jù)寶寶JS公共接口的特性，它們不需要實(shí)例化，所以優(yōu)化使用了該方式。下面以PetConfigParser為例介紹下實(shí)現(xiàn)方式：var PetConfigParser;if (!PetConfigParser) PetConfigParser = ;(function () /private 變量、函數(shù) /* * 寶寶所有配置字典，以【cate * 10000 + (lvl

4、 - 1) * 10 + dex - 1】為key * attribute petDic * type Object * private */ var petDic = null; /寶寶字典 /* * 根據(jù)_pet_config構(gòu)建一個(gè)Object字典，以cate、dex、lvl組合作為key * method buildPetDic * private * return void */ function buildPetDic() petDic = new Object(); for (var item in _pet_config) var lvl = parseInt(_pet_con

5、figitemlvl); var dex = parseInt(_pet_configitemdex); var cate = parseInt(_pet_configitemcate); var key = cate * 10000 + (lvl - 1) * 10 + dex; petDickey = _pet_configitem; /public 接口 /* * 根據(jù)寶寶id，讀取_pet_config中對(duì)應(yīng)寶寶的信息 * method getPetById * param String/int petId 寶寶id * return Object pet 寶寶的所有靜態(tài)信息，如id:

6、300003289, lvl:1, dex:2, price:200, life:2592000, cate:3, name:飛天小使等級(jí)1熟練2, intro:, skill:護(hù)身符, skill1_prob:30, skill2_prob:0 */ if (typeof PetConfigParser.getPetById != function) PetConfigParser.getPetById = function (petId) var pet = (undefined = typeof (_pet_config) ? null : _pet_configpet_ + petId

7、; return pet; )(); 這種方式利用了JavaScript匿名函數(shù)來創(chuàng)建私有作用域，這些私有作用域只能在內(nèi)部訪問。總結(jié)上述過程分為以下幾個(gè)步驟：1、定義一個(gè)全局的變量（var PetConfigParser），注意變量首字母大寫與普通變量區(qū)別；2、然后創(chuàng)建一個(gè)匿名函數(shù)并運(yùn)行（(function () /*xxxx*/ )();），在匿名函數(shù)內(nèi)部創(chuàng)建局部變量和函數(shù)，它們只能在當(dāng)前作用域中被訪問到；3、全局變量（var PetConfigParser）可以在任何地方訪問到，在匿名函數(shù)內(nèi)部操作PetConfigParser添加靜態(tài)函數(shù)。使用實(shí)例：$(function () Dialog

8、Manager.init(); $(#showDialog).click(function () DialogManager.show(#msgBoxTest， #closeId); return false; ); $(#cofirmBtn).click(function () DialogManager.hide(); return false; );)實(shí)例類JavaScript實(shí)現(xiàn)經(jīng)典的類，總結(jié)有三種方法： 構(gòu)造函數(shù)方式； 原型方式； 構(gòu)造函數(shù)+原型的混合方式構(gòu)造函數(shù)方式構(gòu)造函數(shù)用來初始化實(shí)例對(duì)象的屬性和值。任何JavaScript函數(shù)都可以用作構(gòu)造函數(shù)，構(gòu)造函數(shù)必須使用new運(yùn)算符作為

9、前綴來創(chuàng)建新的實(shí)例。var Person = function (name) = name; this.sayName = function() aler); ;/實(shí)例化var tyler = new Person(tylerzhu);var saylor = new Person(saylorzhu);tyler.sayName();saylor.sayName();/檢查實(shí)例alert(tyler instanceof Person); 構(gòu)造函數(shù)方式跟傳統(tǒng)的面向?qū)ο笳Z言是不是很相識(shí)！只不過是class關(guān)鍵字用function替換了。注意：不要省略new否則Person(“tylerzhu”

10、) /=undefined。當(dāng)使用new關(guān)鍵字來調(diào)用構(gòu)造函數(shù)時(shí)，執(zhí)行上下文（context）從全局對(duì)象（window）變成一個(gè)空的上下文，這個(gè)上下文代表了新生成的實(shí)例。因此，this關(guān)鍵子指向當(dāng)前創(chuàng)建的實(shí)例。所以省略new時(shí)，沒有進(jìn)行上下文切換會(huì)在全局對(duì)象中查找name，沒有找到而創(chuàng)建一個(gè)全局變量name返回undefined。原型方式構(gòu)造函數(shù)方式簡(jiǎn)單，但是存在一個(gè)浪費(fèi)內(nèi)存的問題。如上面的例子中實(shí)例化了兩個(gè)對(duì)象tyler、saylor，表面上好像沒什么問題，但是實(shí)際上對(duì)于每一個(gè)實(shí)例對(duì)象，sayName()方法都是一模一樣的內(nèi)容，每一次生成一個(gè)實(shí)例，都必須為重復(fù)的內(nèi)容申請(qǐng)內(nèi)容。alert(tyl

11、er. sayName = saylor. sayName) 輸出 false！Javascript中每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，指向另一個(gè)對(duì)象。這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)的實(shí)例共享。var Person = function (name) Ptotype = name; Ptotype.sayName = function() aler); /實(shí)例化var tyler = new Person(tylerzhu);var saylor = new Person(saylorzhu);tyler.sayName();saylo

12、r.sayName();/檢查實(shí)例alert(tyler instanceof Person); 這時(shí)tyler、saylor實(shí)例的sayName方法，都是同一個(gè)內(nèi)存地址（指向prototype對(duì)象），因此原型方法更節(jié)省內(nèi)存。但是看 tyler.sayName(); saylor.sayName(); 兩者輸出，會(huì)看出問題 它們都輸出“saylorzhu”。因?yàn)樵退袑傩远脊蚕?，只要一個(gè)實(shí)例改變其他的都會(huì)跟著改變，所以實(shí)例化對(duì)象saylor覆蓋了tyler。構(gòu)造函數(shù)+原型的混合方式構(gòu)造函數(shù)方式可以為同一個(gè)類的每一個(gè)對(duì)象分配不同的內(nèi)存，這很適合寫類的時(shí)候設(shè)置屬性；但是設(shè)置方法的時(shí)候我們就需要讓

13、同一個(gè)類的不同對(duì)象共享同一個(gè)內(nèi)存了，寫方法用原型的方式最好。所以寫類的時(shí)候需要把構(gòu)造方法和原型兩種方式混合著用（很多類庫提供的創(chuàng)建類的方法或框架的寫類方式本質(zhì)上都是：構(gòu)造函數(shù)+原型）。var Person = function (name) Ptotype = name; Ptotype.sayName = function() aler); /實(shí)例化var tyler = new Person(tylerzhu);var saylor = new Person(saylorzhu);tyler.sayName();saylor.sayName();/檢查實(shí)

14、例alert(tyler instanceof Person); 這樣即可通過構(gòu)造函數(shù)構(gòu)造不同name的人，對(duì)象實(shí)例也都共享sayName方法，不會(huì)造成內(nèi)存浪費(fèi)。JavaScript壓縮/合并JavaScript代碼壓縮混淆的意義：簡(jiǎn)單的說就是為了減小js文件大小，去掉多余的注釋和換行縮進(jìn)等，使得下載起來更快，提高用戶體驗(yàn)。JavaScript壓縮工具有很多，我推薦使用jQuery現(xiàn)在使用的工具UglifyJS（jQuery以前也使用過多種壓縮工具，如Packer），因?yàn)樗鼔嚎s性能很好?！癹Query 1.5發(fā)布的時(shí)候 john resig大神說所用的代碼優(yōu)化程序從Google Closure

15、切換到UglifyJS，新工具的壓縮效果非常令人滿意”下面是官方性能對(duì)比：Were still a lot better than YUI in terms of compression, though slightly slower. Were still a lot faster than Closure, and compression after gzip is comparable.FileUglifyJSUglifyJS+gzipClosureClosure+gzipYUIYUI+gzipjquery-1.6.2.js91001(0:01.59)3189690678(0:07.40

16、)31979101527(0:01.82)34646paper.js142023(0:01.65)43334134301(0:07.42)42495173383(0:01.58)48785prototype.js88544(0:01.09)2668086955(0:06.97)2632692130(0:00.79)28624thelib-full.js251939(0:02.55)72535249911(0:09.05)72696258869(0:01.94)76584Uglifyjs安裝UglifyJS是基于 NodeJS 的Javascript語法解析/壓縮/格式化工具，所以我們要安裝No

17、deJS。Node.jsis a platform built on Chromes JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.J

18、avaScript最早是運(yùn)行在瀏覽器中，然而瀏覽器只是提供了一個(gè)上下文，它定義了使用JavaScript可以做什么，但并沒有“說”太多關(guān)于JavaScript語言本身可以做什么。事實(shí)上，JavaScript是一門“完整”的語言：它可以使用在不同的上下文中，其能力與其他同類語言相比有過之而無不及。Node.js事實(shí)上就是另外一種上下文，它允許在后端（脫離瀏覽器環(huán)境）運(yùn)行JavaScript代碼。要實(shí)現(xiàn)在后臺(tái)運(yùn)行JavaScript代碼，代碼需要先被解釋然后正確的執(zhí)行。Node.js的原理正是如此，它使用了Google的V8虛擬機(jī)（Google的Chrome瀏覽器使用的JavaScript執(zhí)行環(huán)境

19、），來解釋和執(zhí)行JavaScript代碼。除此之外，伴隨著Node.js的還有許多有用的模塊，它們可以簡(jiǎn)化很多重復(fù)的勞作，比如向終端輸出字符串。因此，Node.js事實(shí)上既是一個(gè)運(yùn)行時(shí)環(huán)境，同時(shí)又是一個(gè)庫。Windows下面直接下載exe文件執(zhí)行即可。（）C:Userstylernode -v v0.8.2設(shè)置代理（公司網(wǎng)絡(luò)不設(shè)置代理無法下載，外網(wǎng)環(huán)境不需要）“npm，全稱是node packagemanager，它是node包管理器，第三方的package全是通過npm去安裝的?！睘閚pm設(shè)在代理：npm config set proxy=為npm默認(rèn)選擇http方式，不選用https：np

20、m config set registrynpm安裝uglify-js：npm g install uglify-js驗(yàn)證安裝是否成功：C:Userstylernpm -v 1.1.36UglifyJS使用uglifyjs 選項(xiàng). 文件 文件參數(shù)應(yīng)該放在選項(xiàng)后面，uglifyjs 會(huì)讀取文件中的javascript代碼進(jìn)行處理。如果你不指定輸出的文件名，那么他會(huì)把處理后的內(nèi)容輸出到命令行中。支持的選項(xiàng) ：-b 或 -beautify - 輸出格式化代碼，當(dāng)傳入該參數(shù)，下面的附加選項(xiàng)用于更美觀的控制格式化： -i N 或 -indent N - 縮進(jìn)級(jí)別（空格數(shù)量） -q 或 -quote-ke

21、ys - 是否用引號(hào)引起字符串對(duì)象的鍵（默認(rèn)只會(huì)引起不能被正確標(biāo)志的鍵名）-ascii -默認(rèn) UglifyJS 不處理字符編碼而直接輸出 Unicode 字符，通過傳入該參數(shù)將非ASCII編碼的字符轉(zhuǎn)化為cXXXX的序列（輸出總按照UTF8編碼，但傳入該選項(xiàng)能得到ASCII編碼的輸出）。-nm 或 -no-mangle - 不改變變量名稱-ns 或 -no-squeeze - 不調(diào)用 ast_squeeze() 函數(shù)（該函數(shù)會(huì)做多種優(yōu)化使得結(jié)果更小，可讀性略有降低）-mt 或 -mangle-toplevel - 在頂級(jí)作用域打亂變量名稱（默認(rèn)不開啟）-no-seqs - 當(dāng)調(diào)用 ast_s

22、queeze() 將會(huì)合并多個(gè)語句塊為一個(gè)語句塊，如 a=10; b=20; foo() 將被轉(zhuǎn)換為 a=10,b=20,foo()-no-dead-code - 默認(rèn) UglifyJS 將會(huì)刪除不被用到的代碼，傳入該參數(shù)禁用此功能。-nc 或 -no-copyright - 默認(rèn) uglifyjs 會(huì)在輸出后的代碼中添加版權(quán)信息等注釋代碼，傳入該參數(shù)禁用此功能。-o 文件名 或 -output 文件名 - 指定輸出文件名，如果不指定，則打印到標(biāo)準(zhǔn)輸出（STDOUT）-overwrite - 如果傳入的JS代碼來自文件而不是標(biāo)準(zhǔn)輸入，傳入該參數(shù)，輸出會(huì)覆蓋該文件。-ast - 傳入該參數(shù)會(huì)得到

23、抽象的語法樹而不是Javascript，對(duì)調(diào)試或了解內(nèi)部代碼很有用。-v 或 -verbose - 在標(biāo)準(zhǔn)錯(cuò)誤輸出一些信息（目前的版本僅輸出操作用時(shí)）-extra - 開啟附加優(yōu)化，這些優(yōu)化并未得到全面的測(cè)試。-unsafe - 開啟其他附加優(yōu)化，這些優(yōu)化已知在特定情況下并不安全，目前僅支持：foo.toString() = foo+”-max-line-len （默認(rèn)32K字節(jié)） - 在32K字節(jié)出增加換行符，傳入0禁用此功能。-reserved-names - 一些類庫會(huì)依賴一些變量，該參數(shù)指定的名稱不會(huì)被混淆掉，多個(gè)用逗號(hào)隔開下面是我們使用uglifyjs壓縮，PetConfigPars

24、er.js的例子：uglifyjs -nc -mt PetConfigParser.js PetConfigParser.min.jsPetConfigParser.js壓縮前后對(duì)比壓縮前壓縮后JavaScript文件合并規(guī)則1減少HTTP請(qǐng)求（Minimize HTTP Requests）Yahoo前端優(yōu)化性能規(guī)則5只有10%20%的最終用戶響應(yīng)時(shí)間花在接收請(qǐng)求的HTML文檔上，剩下的80%90%時(shí)間都花在HTML文檔所引用的所有組件（圖片、腳本、樣式表、Flash等）進(jìn)行的HTTP請(qǐng)求上。因此，改善響應(yīng)時(shí)間最簡(jiǎn)單的辦法就是減少組件數(shù)量并由此減少HTTP請(qǐng)求數(shù)。對(duì)公共庫合并壓縮在減少size

25、的同時(shí)，減少http請(qǐng)求優(yōu)化網(wǎng)絡(luò)耗時(shí)提升性能。文檔生成YUIDoc 是一個(gè)基于 Node.js 的應(yīng)用程序，用來根據(jù) JavaScript 的注釋中生成 API 文檔，類似 JavaDoc、ASDoc，這也是當(dāng)前 YUI 用來生成文檔的工具。YUIDoc安裝與使用YUIDoc安裝與UglifyJS一樣，YUIDoc也是基于Nodejs的一個(gè)應(yīng)用程序，使用npm安裝即可。npm -g install yuidocjs.校驗(yàn)安裝是否成功C:Userstyleryuidoc -v 0. 3.15生成文檔（一次性生成）yuidoc .一次性生成該目錄及其子目錄下所有JS的文檔 默認(rèn)在不配置的情況下會(huì)生成在當(dāng)前目錄的out目錄中。-o, -out Path to put the generated files (defaults to ./out)生成文檔（實(shí)時(shí)生成）YUIDoc還提供了一種實(shí)時(shí)文檔生成的方式