JavaScript性能優化篇js優化

 

隨着Ajax越來越普遍,Ajax引用的規模越來越大,Javascript代碼的性能越來越顯得重要,我想這就是一個很典型的例子,上面那段代碼因為會被頻繁使用,所以才有了此優化的過程,我在本文中將指出一些重要的規則,介紹如何使用你的JavaScript、使用哪些工具以及你將從中得到什么好處.

確保代碼盡量簡潔

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

盡量減少DOM訪問

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

壓縮代碼

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

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

◆ YUI壓縮工具(我的最愛，jQuery開發團隊就使用它)，初學者指南(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——谷歌Ajax，關於更多庫的信息請參閱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 Analytics)來獲得統計數據。這很好。現在看一下你把你的跟蹤代碼放在哪里。是放在頭部分?還是說它使用document.write?然后，如果你沒有使用谷歌分析工具異步跟蹤代碼，那也只能怪你自己。

這就是谷歌分析工具異步跟蹤代碼的樣子,我們必須承認，它使用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);
　})();

沒有使用谷歌分析工具?這不是問題，今天的分析工具提供商大多允許你使用異步跟蹤。

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;i0;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()快。

字符串遍歷操作

對字符串進行循環操作，譬如替換、查找，應使用正則表達式，因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用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是解釋型的,一般不會在運行時對字節碼進行優化,所以這些優化仍然是很重要的.