JavaScript執行效率與性能提高方案（轉）

如何提高JavaScript執行效率與性能在前端開發中位於一個很重要的地方，這節來研究下如何在平時作項目過程當中，提高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方法鏈接起來，
以下
<script>
var buf = new Array();
for (var i = 0; i < 100; i++) {
buf.push(i.toString());
}
var all = buf.join("" "");
</script>

類型轉換
類型轉換是你們常犯的錯誤，由於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。

文件優化
文件優化也是一個頗有效的手段，刪除全部的空格和註釋，把代碼放入一行內，能夠加快下載的速度，注意，是下載的速度而不是解析的速度，若是是本地，註釋和空格並不會影響解釋和執行速度。
總結：直接拿手頭現成的東西比較快，如局部變量比全局變量快，直接量比運行時構造對象快等等。 儘量少地減小執行次數，好比先緩存須要屢次查詢的。儘量使用語言內置的功能，好比串連接。儘量使用系統提供的API，由於這些API是編譯好的二進制代碼，執行效率很高。 同時，一些基本的算法上的優化，一樣能夠用在JavaScript中，好比運算結構的調整，這裏就再也不贅述了。

因爲JavaScript是解釋型的，通常不會在運行時對字節碼進行優化，因此這些優化仍然是很重要的。