JavaScript高性能開發的十條建議

JavaScript高性能開發的十條建議

文/開發部 Dimmacro

編者按：javascript開發大部分程序員都作過，寫出來的代碼質量也千差萬別，如今瀏覽器內嵌的解釋器雖然效率已經很高了，但在客戶完美體驗的趨勢下仍是捉襟見肘，編寫高性能javascript代碼，無疑能帶來更好的客戶體驗。本文的這些建議能給開發者帶來必定的方向指導，值得一讀。

1.使用延遲腳本，動態加載腳本，XHR腳本注入等方式加載js腳本，避免多腳本加載出現的頁面長時間等待。

編輯解讀：每讀取一個頁面，頁面內容從上到下順序加載，每遇到js文件，UI線程暫停讀取頁面，下載並進入js文件中進行解析，若是js文件過多過大，每每致使暫停時間過長，延長了頁面加載時間。所以採用上述技術，只將須要的js加載進來，待頁面徹底顯示後，再加載其餘js，提升客戶體驗。

2.用臨時變量存儲須要屢次訪問的全局對象及變量，減小在做用域鏈中解析標識符的時間。

編輯解讀：js解釋器查找變量的時候，從局部做用域鏈到全局做用域鏈，若是頻繁的讀取一個全局變量，將其用臨時變量指代，無疑會提升讀取效率和代碼運行效率。

3.在JS腳本里儘量多的對元素操做完成後一次運用到元素，避免屢次讀取相同的元素位置，大小，偏移量等信息，用變量存儲之以減小UI線程重排，重繪元素的壓力。也能夠採用隱藏元素再修改，文檔片斷修改後一次加入，和克隆副本並在操做副本後將副本取代原對象的方式，儘可能減小因爲JS操做帶來的屢次UI刷新。

編輯解讀：每次js腳本對html元素進行了修改，UI線程都會對整個頁面進行重繪以更新頁面，減小重繪次數，提升重繪和重排效率。

4.循環遍歷多采用從後往前式，較少與length比較大小再判斷true或false的步驟會提升很大的性能。if-else判斷時將機率大的處理放在前面。for循環利用達夫設備模式一次多執行幾回操做。

編輯解讀：通常人遍歷數組或列表都是從前日後遍歷，此種遍歷方式每次都是比較當前index是否大於數組長度減1，若是採用從後往前遍歷，利用js中小於0都是false的特性，減小判斷。達夫設備模式是一種思路，讓一次循環儘可能執行多的操做，從而提升效率。其基本思想是：先遍歷總次數與8的取模次，而後遍歷總次數除於8取整的次數，每次處理八個相同的操做。如：

// dafu

      var iters = Math.floor(arr.length/8);

      var startIn = arr.length%8;  

      start = +new Date();

      do{

            switch(startIn){

                  case 0:process();

                  case 7:process();

                  case 6:process();

                  case 5:process();

                  case 4:process();

                  case 3:process();

                  case 2:process();

                  case 1:process();

            }

            startIn = 0;

      }while(--iters);

5.遞歸嵌套利用Memoization，緩存以前的計算結果以較少重複計算。

編輯解讀：相似屢次求階乘問題，用此方式緩存以前階乘結果，能有效避免重複計算，提升效率。示例代碼：

function memoize(fundamental,cache){

      cache = cache || {};

      var shell = function(arg){

            if(!cache.hasOwnProperty(arg)){

                  cache[arg] = fundamental(arg);

            }

            return cache[arg];

        };

      return shell;

}

6.字符串鏈接多用+而不是+=，而且讓鏈接字符串中最常的一個字符串放到等號後最左的位置，如 var newStr=longStr+other1+other2....若是是IE7及更早版本，多用數組項鍊接來鏈接字符串。

編輯解讀：IE7及更早版本，對字符串鏈接操做採起的是所有拷貝到一塊新的內存後鏈接在一塊兒的方式，特別耗性能，不過隨着軟硬件的升級，IE7及更早版本已經要退出歷史舞臺了。新的IE8,9對字符串鏈接都作了很多優化。

7.明確正則表達式的起始匹配位置，儘可能減小匹配分支，合適使用匹配量詞，避免回溯混亂產生的性能問題。

編輯解讀：正則匹配，每個模糊或元字符都是一個分支，在每一個分支匹配的最後，若是沒有成功結果，會退回到上一個分支，所以，減小匹配分支能有效提升匹配的效率。

8.使用定時器setTimeout和setInterval將須要耗時很長的js腳本分段處理，能夠避免出現頁面假死現象。

編輯解讀：JS解釋執行與頁面渲染共用一個UI線程，所以若是JS代碼佔用線程時間過長，必然會影響頁面渲染從而形成假死的現象。解決的方式就是利用定時器函數，分開整段js代碼執行，分段利用CPU，讓頁面渲染能有更多的機會搶到執行時間。

9.多使用瀏覽器支持的原生方法，而不是本身實現的方法。

編輯解讀：原生的方法，現代瀏覽器都作了一些優化。如IE8之後對查詢實現了querySelector和querySelectorAll方法，比jquery更高效，使用更方便。

10.利用腳本預處理技術，javascript壓縮技術，多個腳本合併技術等，儘可能減小瀏覽器加載時的HTTP請求次數和跳過空白和註釋的次數。

編輯解讀：頁面加載的時候對每個js文件都會執行一次http請求，以便將js文件的內容讀入並解析，採用上述技術，能夠減小http請求的次數，提升解釋器解析的效率。

 

 

 

 

來自爲知筆記(Wiz)