當前位置:學問君>人在職場>電腦培訓>

JavaScript執行效率與性能提升策略

學問君 人氣:1.34W

JavaScript執行效率與性能提升策略

JavaScript執行效率與性能提升策略

如何提升JavaScript執行效率與性能在前端開發中位於一個很重要的地方,這節來研究下如何在平時做項目過程中,提升JavaScript性能與執行效率。

循環

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

而事實上,如何使用這兩個循環,則有很大講究。最後得出的結論是:

如果是循環變量遞增或遞減,不要單獨對循環變量賦值,應該在它最後一次讀取的時候使用嵌套的++或--操作符。如果要與數組的長度作比較,應該事先把數組的length屬性放入一個局部變量中,減少查詢次數。舉例,假設arr是一個數組,最佳的遍歷元素方式爲:

複製代碼 代碼如下:

for(var i=0, len = th;i

或者,如果無所謂順序的話:

複製代碼 代碼如下:

for(var i=th;i>0;i--){...}

局部變量和全局變量

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

不使用Eval

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

減少對象查找

因爲JavaScript的解釋性,所以a.b.c.d.e,需要進行至少4次查詢操作,先檢查a再檢查a中的b,再檢查b中的c,如此往下。所以如果這樣的表達式重複出現,只要可能,應該儘量少出現這樣的表達式,可以利用局部變量,把它放入一個臨時的地方進行查詢。這一點可以和循環結合起來,因爲我們常常要根據字元串、數組的長度進行循環,而通常這個長度是不變的,比如每次查詢th,就要額外進行一個操作,而預先把var len=th,則就少了一次查詢。

字元串連接

如果是追加字元串,最好使用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++){ (ring());}var all = ("""");

類型轉換

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

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

複製代碼 代碼如下:

("""" + ) > String() > ring() > new String()

這條其實和下面的“直接量”有點類似,儘量使用編譯時就能使用的內部操作要比執行時使用的用戶操作要快。

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

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

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

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中使用e來給頁面生成內容。事實上這樣的效率較低,如果需要直接插入HTML,可以找一個容器元素,比如指定一個div或者span,並設定他們的innerHTML來將自己的代碼插入到頁面中。

對象查詢

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

創建DOM節點

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

無法保證代碼的有效性

字元串操作效率低

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

定時器

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

其他

腳本引擎

據我測試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,無論是執行速度還是內存管理上,因爲JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject。

檔案優化

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

總結:直接拿手頭現成的東西比較快,如局部變量比全局變量快,直接量比執行時構造對象快等等。 儘可能少地減少執行次數,比如先快取需要多次查詢的。儘可能使用語言內置的功能,比如串連結。儘可能使用系統提供的API,因爲這些API是編譯好的二進制代碼,執行效率很高。 同時,一些基本的算法上的優化,同樣可以用在JavaScript中,比如運算結構的調整,這裏就不再贅述了。