|
|
在大部分情況下，代碼的優(yōu)化并不是實(shí)際開(kāi)發(fā)中所需要著重的部分。但是一旦代碼完成了以后，開(kāi)發(fā)者總是期待自己的代碼能夠越短越高效越好。結(jié)合從書(shū)中獲得的知識(shí)以及本人實(shí)際開(kāi)發(fā)過(guò)程中的經(jīng)驗(yàn)，下面說(shuō)明本人所采取的一些花招（也算是照本宣科一下）。
前言
相比腳本語(yǔ)言，編譯型的語(yǔ)言并不需要太關(guān)心優(yōu)化問(wèn)題。在極大的程度上，編譯時(shí)編譯器都會(huì)之行優(yōu)化操作。比如所有的變量、函數(shù)、對(duì)象等等都會(huì)替換成只有處理器才能理解的符號(hào)和指針（就是通常所指的可執(zhí)行文件）。其他的腳本語(yǔ)言也并不需要過(guò)分在意文件的大小問(wèn)題，但是 Javascript 則不同。
因?yàn)樗紫纫ㄟ^(guò)從服務(wù)器端下載源代碼，然后再由客戶端的瀏覽器執(zhí)行。因此，Javascript代碼的速度被分割成兩部分：下載時(shí)間（取決于文件的大小）和執(zhí)行速度（取決于代碼算法）。這篇主要討論的是 Javascript的下載時(shí)間優(yōu)化，也就是如何盡可能的縮小 Javascript 文件本身的容量。
在這里要記住的一個(gè)數(shù)字是 1160，這是能放入單個(gè) TCP/IP 包中的字節(jié)數(shù)。所以，最好的期望值是能將每個(gè) Javascript 文件保持在 1160 字節(jié)一下，以獲取最優(yōu)的下載時(shí)間。
刪除注釋
這似乎是是廢話，不過(guò)很多開(kāi)發(fā)人員都會(huì)忘記。在實(shí)際生產(chǎn)環(huán)境中，腳本中的注釋都應(yīng)該刪除。在開(kāi)發(fā)期間注釋相當(dāng)?shù)闹匾梢詭椭鷪F(tuán)隊(duì)理解代碼。但在實(shí)際生產(chǎn)環(huán)境中，注釋會(huì)明顯使腳本文件體積變大。刪除它們并不會(huì)給腳本實(shí)際運(yùn)行帶來(lái)任何的影響。
刪除制表符和空格
具有良好縮進(jìn)和空格的代碼通常都具有良好的可讀性。但是瀏覽器并不需要這些額外的制表符和空格，所以最好刪除它們。當(dāng)然也不要忘記函數(shù)參數(shù)，賦值語(yǔ)句以及比較操作之間的空格。比如
function showMeTheMoney(money)
{
if (!money) {
return false;
} else {
...
}
}可以優(yōu)化成
function showMeTheMoney(money){if(!money){reutrn false;}else{...}}
這樣可以減少部分容量。
刪除所有的換行
有許多關(guān)于在 Javascript 中換行應(yīng)該存在的思考，但底線都是換行要增加代碼的可讀性。但過(guò)分的換行也會(huì)造成代碼體積的增加。
可能處于某種原因而不能刪除換行符，這樣則要保證文件是 Unix 格式的。因?yàn)?nbsp;Windows、Mac 格式的換行符用兩個(gè)字符表示換行；Unix 僅用一個(gè)。所以將文件轉(zhuǎn)換成 Unix 格式也可以節(jié)約一些字節(jié)數(shù)。
替換變量名
這可能是最無(wú)聊的一種做法，這通常不是手工完成的。畢竟變量的名稱(chēng)對(duì)解釋器來(lái)說(shuō)毫無(wú)意義（只是對(duì)開(kāi)發(fā)人員來(lái)說(shuō)會(huì)更友好一些），在生產(chǎn)環(huán)境中將描述性的變量名替換成更簡(jiǎn)單、更短的名稱(chēng)也可以縮減一部分體積。比如上述的代碼可以縮減成：
function sm(m){if(!m){reutrn false;}else{...}}
這樣雖然看起來(lái)會(huì)比較的頭痛，不過(guò)實(shí)際之行效果是一樣的。
使用工具
實(shí)際使用上述的方法可能會(huì)有一些困難，幸好有現(xiàn)成的外部工具能完成這些步驟。下面簡(jiǎn)單的介紹幾個(gè)：
ECMAScript Cruncher：http://saltstorm.NET/depo/esc/
JSMin（The JavaScript Minifier）: http://www.crockford.com/Javascript/jsmin.html
Online JavaScript Compressor.：http://dean.edwards.name/packer/
我猜你會(huì)有興趣看下這篇文章。
其他方法
替換布爾值
對(duì)于比較來(lái)說(shuō)，true 就等于 1，false 就等于 0 。因此，腳本包含的字面量 true 都可以用 1 來(lái)替換，而 false 可以用 0 來(lái)替換。對(duì)于 true 節(jié)省了 3 個(gè)字節(jié)，而 false 則節(jié)省了 4 個(gè)字節(jié)。
縮短否定檢測(cè)
代碼中常常會(huì)出現(xiàn)檢測(cè)某個(gè)值是否有效的語(yǔ)句。而大部分條件非的判斷就是判斷某個(gè)變量是否為 undefined、null 或者 false，比如：
if (myValue != undefined) {
// ...
}
if (myValue != null) {
// ...
}
if (myValue != false) {
// ...
}
這些雖然都正確，但用邏輯非操作符也可以有同樣的效果：
if (!myValue) {
// ...
}
這樣的替換也可以節(jié)省一部分字節(jié)。
使用數(shù)組和對(duì)象字面量
這個(gè)比較好理解，比如一下兩行是相同的：
var myArray = new Array;
var myArray = [];
然而第二行比第一行短很多，而且也能非常容易的理解。類(lèi)似的還有對(duì)象聲明：
var myObject = new Object;
var myObject = {};
舉個(gè)例子，比如下面的語(yǔ)句：
var mySite = new Object;
mySite.author = "feelinglucky";
mySite.location = "http://www.gracecode.com";
這樣寫(xiě)也可以非常容易的理解，并且短很多：
var mySite = {author:"feeinglucky", location:"http://www.gracecode.com"};
好的，這期就到這里。就向上面說(shuō)的，Javascript 代碼的速度被分割成兩部分：下載時(shí)間（取決于文件的大小）和執(zhí)行速度（取決于代碼算法）。這次討論的是下載時(shí)間方面的優(yōu)化，下期討論之行速度方面的優(yōu)化（這樣看起來(lái)非常有技術(shù)含量，不是么）。
下面布置家庭作業(yè)。或許大家會(huì)有興趣了解下 jQuery 是怎么把自己 70KB 的代碼壓縮至 20KB 左右的。
JavaScript技術(shù)：Javascript優(yōu)化技巧（文件瘦身篇），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
