JS性能優化筆記

經過網上查找資料瞭解關於性能優化方面的內容，現簡單整理，僅供你們在優化的過程當中參考使用，若有什麼問題請及時提出，再作出相應的補充修改。

1、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的狀況下能夠簡寫爲x++;

2、 變量名方法名儘可能在不影響語意的狀況下簡單。（能夠選擇首字母命名）

eg：定義數組的長度能夠取名爲：ArrLen而不須要取爲ArrayLength。

3、 關於JS的循環，循環是一種經常使用的流程控制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，由於它須要查詢Hash鍵，所以應儘可能少用for(in)循環，for(;;)、while()循環的性能基本持平。固然，推薦使用for循環，若是循環變量遞增或遞減，不要單獨對循環變量賦值，而應該使用嵌套的++或–運算符。

4、 若是須要遍歷數組，應該先緩存數組長度，將數組長度放入局部變量中，避免屢次查詢數組長度。

由於咱們經常要根據字符串、數組的長度進行循環，而一般這個長度是不變的，好比每次查詢a.length，就要額外進行一個操做，而預先把var len=a.length，則就少了一次查詢。

5、 儘可能選用局部變量而不是全局變量。

局部變量的訪問速度要比全局變量的訪問速度更快，由於全局變量實際上是window對象的成員，而局部變量是放在函數的棧裏的。

6、 儘可能少使用eval。

每次使用eval須要消耗大量時間，這時候使用JS所支持的閉包能夠實現函數模板。

7、 減小對象查找

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

8、 字符串鏈接。

若是是追加字符串，最好使用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("");

9、 類型轉換

1. 把數字轉換成字符串，應用"" + 1，雖然看起來比較醜一點，但事實上這個效率是最高的，性能上來講：("" +) > String() > .toString() > new String()

儘可能使用編譯時就能使用的內部操做要比運行時使用的用戶操做要快。

String()屬於內部函數，因此速度很快，而.toString()要查詢原型中的函數，因此速度遜色一些，new String()用於返回一個精確的副本。

1. 浮點數轉換成整型，這個更容易出錯，不少人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，咱們應該使用Math.floor()或者Math.round()。Math是內部對象，因此Math.floor()其實並無多少查詢方法和調用的時間，速度是最快的。

2. 對於自定義的對象，若是定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，由於內部的操做在嘗試全部可能性以後，會嘗試對象的toString()方法嘗試可否轉化爲String，因此直接調用這個方法效率會更高

10、 儘可能做用JSON格式來建立對象，而不是var obj=new Object()方法。

由於前者是直接複製，然後者須要調用構造器，於是前者的性能更好。

11、 當須要使用數組時，也儘可能使用JSON格式的語法，

使用JSON格式的語法即直接使用以下語法定義數組：[parrm,param,param...],而不是採用new Array(parrm,param,param...)這種語法。由於使用JSON格式的語法是引擎直接解釋的。然後者則須要調用Array的構造器。

12、 對字符串進行循環操做，例如替換、查找，就使用正則表達式。

由於JS的循環速度比較慢，而正則表達式的操做是用C寫成的API，性能比較好。

十3、 插入HTML

不少人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，若是須要直接插入HTML，能夠找一個容器元素，好比指定一個div或者span，並設置他們的innerHTML來將本身的HTML代碼插入到頁面中。

十4、 對象查詢

使用[「」]查詢要比.items()更快

十5、 定時器

若是針對的是不斷運行的代碼，不該該使用setTimeout，而應該是用setInterval。setTimeout每次要從新設置一個定時器。

十6、 儘可能減小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屬性緩存在一個本地變量中，這樣就能大幅度的提升循環的效率。

十7、 重構<script>和<style> 調用方式或合併js文件來優化請求次數，並儘可能使用外部連接方式引用

咱們經常在一個HTML文件頭中看到這樣標記代碼:

<script src="/scripts/a.js"></script> <script src="/scripts/b.js"></script> <script src="/scripts/c.js"></script>

大可能是狀況下，上述代碼能夠被簡化成：

<script src="/ scripts /d.js"></script>

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

十8、 對於大的JS對象，由於建立時時間和空間的開銷都比較大，所以應該儘可能考慮採用緩存。

十9、 將腳本放到底部。

腳本通常是用來於用戶交互的，建議能夠等頁面加載完成以後再加載js文件。因此，腳本和CSS正好相反，腳本應該放在頁面的底部。

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

能夠用相關工具去除空白註釋等,將全部的名稱都從新用一個或兩個字母來命名將帶來顯著的改善。（但須要留有一個未驗收的備份文件，方便之後維護）
轉自：http://blog.csdn.net/huanghui8030/article/details/10148291