JS效能優化筆記搜尋整理_javascript技巧

透過網路尋找資料了解關於效能優化方面的內容，現簡單整理，僅供大家在優化的過程中參考使用，如有什麼問題請及時提出，再做出相應的補充修改。

一、 讓程式碼簡潔：一些簡略的表達方式也會產生很好的最佳化

eg：x=x 1;在不影響功能的情況下可以簡寫為x ;

二、 變數名方法名盡量在不影響語意的情況下簡單。 （可以選擇首字母命名）

eg：定義陣列的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是常用的流程控制。

JS提供了三種迴圈：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，建議使用for循環，如果循環變數遞增或遞減，不要單獨對循環變數賦值，而應該使用嵌套的 或–運算符。

四、 若需要遍歷數組，應該先快取數組長度，將數組長度放入局部變數中，避免多次查詢數組長度。

因為我們常常要根據字串、陣列的長度進行循環，而通常這個長度是不變的，例如每次查詢a.length，就要額外進行一個操作，而預先把var len= a.length，則少了一次查詢。

五、 盡量選用局部變數而不是全域變數。

局部變數的存取速度比全域變數的存取速度更快，因為全域變數其實是window物件的成員，而局部變數是放在函數的堆疊裡的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支援的閉包可以實現函數模板。

七、 減少物件查找

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

八、 字串連接。

如果是追加字串，最好使用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

九、 型別轉換

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，所以直接呼叫這個方法效率會更高

十、 盡量作用JSON格式來建立對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要呼叫構造器，因而前者的效能較好。

十一、 需要使用陣列時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義陣列：[parrm,param,param.. .],而不是採用new Array(parrm,param,param...)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要呼叫Array的構造器。

十二、 對字串進行循環操作，例如替換、查找，就使用正規表示式。

因為JS的迴圈速度比較慢，而正規表示式的運算是用C寫成的API，效能比較好。

十三、 插入HTML

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

十四、 物件查詢

使用[“”]查詢要比.items()更快

十五、定時器

如果針對的是不斷運作的程式碼，不應該使用setTimeout，而應該是用setInterval。 setTimeout每次要重新設定計時器。

十六、 盡量減少DOM呼叫

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行回流 （reflow）操作。我們應該盡可能的減少DOM操作。
回流操作主要會發生在幾種情況下：
* 改變窗體大小
* 更改字體
* 添加移除stylesheet塊
* 內容改變哪怕是輸入框輸入文字
* CSS虛類別被觸發如:hover
* 更改元素的className
* 當對DOM節點執行新增或刪除操作或內容變更時。
* 動態設定一個style樣式時（例如element.style.width="10px"）。
* 當取得一個必須經過計算的尺寸值時，例如存取offsetWidth、clientHeight或其他需要經過計算的CSS值
解決問題的關鍵，就是限制透過DOM操作引發回流的次數:
1.在對目前DOM進行操作之前，盡可能多的做一些準備工作，確保N次創建，1次寫入。
2.在對DOM操作之前，把要操作的元素，先從當前DOM結構中刪除：
2.1. 透過removeChild()或replaceChild()實現真正意義上的刪除。
2.2. 設定該元素的display樣式為「none」。

3.CSS部分
另一個經常引起回流操作的情況是透過style屬性對元素的外觀進行修改，如element.style.backgroundColor = "blue";
每次修改元素的style屬性，都一定會觸發回流操作，要解決這個問題可以：
3.1.使用更改className的方式取代style.xxx=xxx的方式。
3.2.使用style.cssText = '';一次寫入樣式。
3.3. 避免設定過多的行內樣式
3.4. 新增的結構外元素盡量設定它們的位置為fixed或absolute
3.5. 避免使用表格來佈局
3.6. 避免在CSS中使用JavaScript expressions(IE only)
4.將取得的DOM資料快取起來。這種方法，對取得那些會觸發回流操作的屬性（例如offsetWidth等）尤其重要。
5.當對HTMLCollection物件進行操作時，應該將存取的次數盡可能的降至最低，最簡單的，你可以將length屬性緩存在一個本地變數中，這樣就能大幅度的提高循環的效率。

十七、 重構<script>和<style> 呼叫方式或合併js檔案來最佳化請求次數，並儘量使用外部連結方式引用<br><br>我們常常在一個HTML檔案頭中看到這樣標記程式碼: <br><br><script src="/scripts/a.js"></script>



大多是情況下，上述程式碼可以簡化成：



其中d.js中引用了a.js/b.js/c.js。透過document.write方法寫入。

十八、 對於大的JS對象，因為創建時時間和空間的開銷都比較大，因此應該盡量考慮採用緩存。

十九、 將腳本放到底部。

腳本一般是用來於使用者互動的，建議可以等頁面載入完成之後再載入js檔案。所以，腳本和CSS正好相反，腳本應該放在頁面的底部。

二十、 除去JavaScript中的空白區域

可以用相關工具去除空白註釋等,將所有的名稱都重新用一個或兩個字母來命名將帶來顯著的改善。 （但需要留有一個未驗收的備份文件，方便以後維護）