JavaScript效能最佳化篇js最佳化

我在本文中將指出一些重要的規則，介紹如何使用你的JavaScript、使用哪些工具以及你將從中得到什麼好處。

確保代碼盡量簡潔

　　不要什麼都依賴JavaScript。不要編寫重複性的指令碼。要把JavaScript當作糖果工具，只是起到美化作用。別給你的網站添加大量的JavaScript代碼。只有必要的時候用一下。只有確實能改善使用者體驗的時候用一下。

盡量減少DOM訪問

　　使用JavaScript訪問DOM元素很容易，代碼更容易閱讀，但是速度很慢。下面介紹幾個要點：限制使用JavaScript來修飾網頁布局，把針對訪問元素的引用緩衝起來。有時，當你的網站依賴大量的DOM改動時，就應該考慮限制你的標記。這是改用HTML5、捨棄那些原來的XHTML和 HTML4的一個充分理由。你可以查看DOM元素的數量，只要在Firebug外掛程式的控制台中輸入：document.getElementsByTagName('*').length。

壓縮代碼

　　要提供經過壓縮的JavaScript頁面，最有效辦法就是先用JavaScript壓縮公用程式對你的代碼壓縮一下，這種壓縮公用程式可以壓縮變數和參數名稱，然後提供因而獲得的代碼，使用了gzip壓縮。

　　是的，我沒有壓縮我的main.js，但你要檢查有沒有未經壓縮的任何jQuery外掛程式，別忘了壓縮。下面我列出了壓縮方面的幾個方案。

　　◆ YUI壓縮公用程式(我的最愛，jQueryTeam Dev就使用它)，初學者指南(http://www.slideshare.net/nzakas /extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方網站(http: //developer.yahoo.com/yui/compressor/)。

　　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　　◆ JSMin(http://crockford.com/JavaScript/jsmin)

　　GZip壓縮：其背後的想法是，縮短在瀏覽器和伺服器之間傳送資料的時間。縮短時間後，你得到標題是Accept-Encoding: gzip,deflate的一個檔案。不過這種壓縮方法有一些缺點。它在伺服器端和用戶端都要佔用處理器資源(以便壓縮和解壓縮)，還要佔用磁碟空間。

　　避免eval()：雖然有時eval()會在時間方面帶來一些效率，但使用它絕對是錯誤的做法。eval()導致你的代碼看起來更髒，而且會逃過大多數壓縮公用程式的壓縮。

　　加快JavaScript裝入速度的工具：Lab.js

　　有許多出色的工具可以加快JavaScript裝入的速度。值得一提的一款工具是Lab.js。

　　藉助LAB.js(裝入和阻止JavaScript)，你就可以並行裝入JavaScript檔案，加快總的裝入過程。此外，你還可以為需要裝入的指令碼設定某個順序，那樣就能確保依賴關係的完整性。此外，開發人員聲稱其網站上的速度提升了2倍。

使用適當的CDN

　　現在許多網頁使用內容分髮網絡(CDN)。它可以改進你的緩衝機制，因為每個人都可以使用它。它還能為你節省一些頻寬。你很容易使用ping檢測或使用Firebug調試那些伺服器，以便搞清可以從哪些方面加快資料的速度。選擇CDN時，要照顧到你網站那些訪客的位置。記得儘可能使用公用存放庫。

　　面向jQuery的幾個CDN方案：

　　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——GoogleAjax，關於更多庫的資訊請參閱http://code.google.com/apis/libraries /devguide.html#Libraries。

　　◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微軟的CDN

　　http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

網頁末尾裝入JavaScript

 
　　如果你關注使用者，使用者因互連網連線速度慢而沒有離開你的網頁，這是一個非常好的做法。易用性和使用者放在首位，JavaScript放在末位。這也許很痛苦，但是你應該有所準備，有些使用者會禁用JavaScript。可以在頭部分放置需要裝入的一些JavaScript，但是前提是它以非同步方式裝入。

非同步裝入跟蹤代碼

　　這一點非常重要。我們大多數人使用Google分析工具(Google Analytics)來獲得統計資料。這很好。現在看一下你把你的跟蹤代碼放在哪裡。是放在頭部分?還是說它使用document.write?然後，如果你沒有使用Google分析工具非同步跟蹤代碼，那也只能怪你自己。

　　這就是Google分析工具非同步跟蹤代碼的樣子。我們必須承認，它使用DOM，而不是使用document.write，這可能更適合你。它可以在網頁裝入之前檢測到其中一些事件，這非常重要。現在想一想這種情況，你的網頁甚至還沒有裝入，所有使用者都關閉了網頁。已找到瞭解決頁面瀏覽量錯失的辦法。

 

　

代碼如下

複製代碼

var _gaq = _gaq || []; 　　_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 　　_gaq.push(['_trackPageview']); 　　(function() { 　　var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; 　　ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 　　var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 　　})();

　　沒有使用Google分析工具?這不是問題，今天的分析工具供應商大多允許你使用非同步跟蹤。

Ajax最佳化

　　Ajax請求對你網站的效能有重大影響。下面我介紹關於Ajax最佳化的幾個要點。

　　緩衝你的ajax

　　先看一下你的代碼。你的ajax可以緩衝嗎?是的，它依賴資料，但是你的ajax請求大多應該可以緩衝。在jQuery中，你的請求在預設情況下已被緩衝，不包括script和jsonp資料類型。

　　針對Ajax請求使用GET

　　POST類型請求要發送兩個TCP資料包(先發送標題，然後發送資料)。GET類型請求只需要發送一個資料包(這可能取決於你的cookie數量)。所以，當你的URL長度不到2K，你又想請求一些資料時，不妨使用GET。

　　使用ySlow

 
語言層次方面

迴圈
迴圈是很常用的一個控制結構，大部分東西要依靠它來完成，在JavaScript中，我們可以使用for(;;),while(),for(in)三種迴圈，事實上，這三種迴圈中for(in)的效率極差，因為他需要查詢散列鍵，只要可以就應該盡量少用。for(;;)和while迴圈的效能應該說基本（平時使用時）等價。

而事實上，如何使用這兩個迴圈，則有很大講究。我在測試中有些很有意思的情況，見附錄。最後得出的結論是：

如果是迴圈變數遞增或遞減，不要單獨對迴圈變數賦值，應該在它最後一次讀取的時候使用嵌套的++或--操作符。

如果要與數組的長度作比較，應該事先把數組的length屬性放入一個局部變數中，減少查詢次數。

舉例，假設arr是一個數組，最佳的遍曆元素方式為：

代碼如下	複製代碼
for(var i=0, len = arr.length;i<len;i++){...}或者，如果無所謂順序的話： for(var i=arr.length;i>0;i--){...}局部變數和全域變數

局部變數的速度要比全域變數的訪問速度更快，因為全域變數其實是全域對象的成員，而局部變數是放在函數的棧當中的。

不使用Eval
使用eval相當於在運行時再次調用解釋引擎對內容進行運行，需要消耗大量時間。這時候使用JavaScript所支援的閉包可以實現函數模版（關於閉包的內容請參考函數式編程的有關內容）

減少對象尋找
因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的運算式重複出現，只要可能，應該盡量少出現這樣的運算式，可以利用局部變數，把它放入一個臨時的地方進行查詢。

這一點可以和迴圈結合起來，因為我們常常要根據字串、數組的長度進行迴圈，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var
len=a.length，則就少了一次查詢。

字串串連
如果是追加字串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要串連多個字串，應該少使用+=，如

代碼如下	複製代碼
s+=a;s+=b;s+=c;應該寫成

代碼如下	複製代碼
s+=a + b + c；

而如果是收集字串，比如多次對同一個字串進行+=操作的話，最好使用一個緩衝。怎麼用呢？使用JavaScript數組來收集，最後使用join方法串連起來，如下

代碼如下	複製代碼
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

類型轉換
類型轉換是大家常犯的錯誤，因為JavaScript是動態類型語言，你不能指定變數的類型。

1.
把數字轉換成字串，應用"" + 1，雖然看起來比較醜一點，但事實上這個效率是最高的，效能上來說：

代碼如下	複製代碼
("" + ) > String() > .toString() > new String()

這條其實和下面的“直接量”有點類似，盡量使用編譯時間就能使用的內部操作要比運行時使用的使用者操作要快。

String()屬於內建函式，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2.
浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。

另外，和第二節的對象尋找中的問題不一樣，Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3.
對於自訂的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

使用直接量
其實這個影響倒比較小，可以忽略。什麼叫使用直接量，比如，JavaScript支援使用[param,param,param,...]來直接表達一個數組，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的，後者要調用一個Array內部構造器，所以要略微快一點點。

同樣，

代碼如下	複製代碼
var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。

字串遍曆操作
對字串進行迴圈操作，譬如替換、尋找，應使用Regex，因為本身JavaScript的迴圈速度就比較慢，而Regex的操作是用C寫成的語言的API，效能很好。

進階對象
自訂進階對象和Date、RegExp對象在構造時都會消耗大量時間。如果可以複用，應採用緩衝的方式。

DOM相關
插入HTML
很多人喜歡在JavaScript中使用document.write來給頁面產生內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設定他們的innerHTML來將自己的HTML代碼插入到頁面中。

物件查詢
使用[""]查詢要比.items()更快，這和前面的減少對象尋找的思路是一樣的，調用.items()增加了一次查詢和函數的調用。

建立DOM節點
通常我們可能會使用字串直接寫HTML來建立節點，其實這樣做

無法保證代碼的有效性

字串操作效率低

所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因為使用createElement()方法之後，你需要設定多次元素的屬性，使用cloneNode()則可以減少屬性的設定次數——同樣如果需要建立很多元素，應該先準備一個樣板節點。

定時器
如果針對的是不斷啟動並執行代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設定一個定時器。

其他
指令碼引擎
據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多，無論是執行速度還是記憶體管理上，因為JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

檔案最佳化
檔案最佳化也是一個很有效手段，刪除所有的空格和注釋，把代碼放入一行內，可以加快下載的速度，注意，是下載的速度而不是解析的速度，如果是本地，注釋和空格並不會影響解釋和執行速度。

 執行個體

最初的代碼：

代碼如下	複製代碼
var s = [x1,x2,.....]; var t = [y1,y2,.....]. //s和t的長度對應，大約2700個元素。 function String.prototype.s2c(){ var k=''; for(var i=0;i<this.length;i++) k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i))) return k; }

//這段代碼為：把String中在s數組出現的字元用t中相應位置的字元替換。這種方法可以用在繁簡轉換上。String的長度不小，一般為一篇blog文章的長度。

第一次最佳化：把k變成數組，因為字串相加沒有Array.join的記憶體效率好。

代碼如下	複製代碼
function String.prototype.s2c(){ var k=[]; for(var i=0;i<this.length;i++) k.push((s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i)))); return k.join(''); }

效率提高不少。

第二次最佳化：減少迴圈內的運算次數。

代碼如下	複製代碼
function String.prototype.s2c(){ var k=[]; for(var i=0;i<this.length;i++) {     var thisC = this.charAt(i);     k.push((s.indexOf(thisC)==-1)?thisC:t.charAt(s.indexOf(thisC))); } return k.join(''); }

這一次把三次this.charAt(i)調用變成了一次調用，效率也有所提高。

第三次最佳化：把數組的indexOf改成HashMap尋找方式，修改迴圈裡面的this.length
先建立HashMap：

代碼如下	複製代碼
var sMap = {},tMap={};     for(var i=0;i<s.length;i++) {         var sChar = s.charAt(i);         var tChar = t.charAt(i);         sMap[sChar ] = tChar;         tMap[tChar] = sChar;     }

然後修改代碼：

代碼如下	複製代碼
function String.prototype.s2c(){ var k=[]; var len = this.length; for(var i=0;i<len;i++) {     var thisC = this.charAt(i);     k[i] = sMap[thisC] || thisC; } return k.join(''); }

這一次改進效能也會有比較好的提升。

最後一次最佳化：改進數組訪問的效能。
把原字串split成數組，然後在一個數組上操作。

代碼如下	複製代碼
function String.prototype.s2c(){ var len = this.length; var k=this.split(''); for(var i=0;i<len;i++) {     var thisC = this[i];     var to = sMap(thisC);     to?k[i]=to:''; //這裡有一個小技巧，這個技巧導致當sMap裡沒有thisC的映射時下面可以少一次賦值運算 } return k.join(''); }

在JavaScript編程中所找到的提高JavaScript運行效能的一些方法，其實這些經驗都基於幾條原則：

直接拿手頭現成的東西比較快，如局部變數比全域變數快，直接量比運行時構造對象快等等。

儘可能少地減少執行次數，比如先緩衝需要多次查詢的。

儘可能使用語言內建的功能，比如串連結。

儘可能使用系統提供的API，因為這些API是編譯好的二進位代碼，執行效率很高

同時，一些基本的演算法上的最佳化，同樣可以用在JavaScript中，比如運算結構的調整，這裡就不再贅述了。但是由於JavaScript是解釋型的，一般不會在運行時對位元組碼進行最佳化，所以這些最佳化仍然是很重要的。