怎么優化JavaScript腳本的性能

本篇內容主要講解“怎么優化JavaScript腳本的性能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么優化JavaScript腳本的性能”吧!

循環

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

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

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

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

舉例，假設arr是一個數組，***的遍歷元素方式為：

for(var i=0, len = arr.length;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()快。

字符串遍歷操作

對字符串進行循環操作，譬如替換、查找，應使用正則表達式，因為本身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

文件優化

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

總結

本文總結了我在JavaScript編程中所找到的提高JavaScript運行性能的一些方法，其實這些經驗都基于幾條原則：

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

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

盡可能使用語言內置的功能，比如串鏈接。

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

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

當然，其實這里的一些技巧同樣使用在其他的一些解釋型語言中，大家也可以進行參考。

到此，相信大家對“怎么優化JavaScript腳本的性能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！