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