網站開發WEB前端高效能最佳化之JavaScript最佳化細節

作為一名網站開發WEB前端工程師，對自己開發的網站項目應該儘可能地對其效能進行最佳化，現在互連網上搜尋到的網站效能最佳化多是翻譯轉載自 Yahoo14條或34條。Yahoo的最佳化建議關注在大的方面，下面，W3C Group為大家呈現WEB前端開發高效能最佳化部分之JavaScript的最佳化細節！

一、避免出現指令碼失控

不論什麼指令碼，在任何時間、任何瀏覽器上執行，都不應該超過100毫秒。如果實際執行的時間長於這個底限，一定要將進程分解成若干更小的程式碼片段。

指令碼失控基本上有以下四個方面的原因：

1. 在迴圈中執行了太多的操作

    解決這個問題的訣竅就是用下面這兩個問題來評估每個迴圈：
    1. 這個迴圈必須要同步執行嗎？
    2. 迴圈裡面的資料，必須要按順序執行嗎？

    如果1和2都可以否定，那麼建議使用setTimeout方式將迴圈體切分成小塊進行非同步處理

    將迴圈中的定義變數及初始化操作放到迴圈外。參見：http://www.w3cgroup.com/article.asp?id=111

2. 臃腫的函數體

    在JavaScript中，我們應該儘可能的用局部變數來代替全域變數!

    理解JavaScript範圍鏈。參見：http://www.jslab.org.cn/?tag=ScopeChainAndClosure

    理解原型鏈。參見：http://www.jslab.org.cn/?tag=prototypeChain

3. 過多的遞迴

    使用迭代方式替代遞迴，採用memoization技術最佳化遞迴

    斐波那契數列的遞迴演算法最佳化，參見：http://www.jslab.org.cn/?tag=Memoization

4. 過多的DOM調用

    在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可你知道嗎？對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流（reflow）操作。而執行了過多的迴流操作，你就會發現自己的網站變得越來越慢了。我們應該儘可能的減少DOM操作。

    迴流操作主要會發生在幾種情況下：

        * 改變表單大小
        * 更改字型
        * 添加移除stylesheet塊
        * 內容改變哪怕是輸入框輸入文字
        * CSS虛類被觸發如 :hover
        * 更改元素的className
        * 當對DOM節點執行新增或者刪除操作或內容更改時。
        * 動態設定一個style樣式時（比如element.style.width="10px"）。
        * 當擷取一個必須經過計算的尺寸值時，比如訪問offsetWidth、clientHeight或者其他需要經過計算的CSS值（在相容DOM的瀏覽器中，可以通過getComputedStyle函數擷取；在IE中，可以通過currentStyle屬性擷取）。

    解決問題的關鍵，就是限制通過DOM操作所引發迴流的次數:

        1.在對當前DOM進行操作之前，儘可能多的做一些準備工作，保證N次建立，1次寫入。

        2.在對DOM操作之前，把要操作的元素，先從當前DOM結構中刪除：
            1. 通過removeChild()或者replaceChild()實現真正意義上的刪除。
            2. 設定該元素的display樣式為“none”。
            修改操作完成後，將上面這個過程反轉過來，建議使用第2種方式。

        3.CSS部分
            另外一個經常引起迴流操作的情況是通過style屬性對元素的外觀進行修改，如element.style.backgroundColor = "blue";
            每次修改元素的style屬性，都肯定會觸發迴流操作，要解決這個問題可以：
            1.使用更改className的方式替換style.xxx=xxx的方式。
            2.使用style.cssText = '';一次寫入樣式。
            3. 避免設定過多的行內樣式
            4. 添加的結構外元素盡量設定它們的位置為fixed或absolute
            5. 避免使用表格來布局
            6. 避免在CSS中使用JavaScript expressions(IE only)

        4.將擷取的DOM資料緩衝起來。這種方法，對擷取那些會觸發迴流操作的屬性（比如offsetWidth等）尤為重要。

        5.當對HTMLCollection對象進行操作時，應該將訪問的次數儘可能的降至最低，最簡單的，你可以將length屬性緩衝在一個本地變數中，這樣就能大幅度的提高迴圈的效率。

二、避免大字串字面量對象操作，如 字串.lenth，盡量轉換為new String(字串)後再進行操作

三、在做字元尋找替換等操作時善用Regex

快速掌握ECMAScriptRegex。參見：http://www.w3cgroup.com/article.asp?id=202

四、減少語句，利用運算子優先順序實現if else運算式，使用三元運算式，使用連續運算式（看情況，將損失程式可讀性）

利用運算子優先順序實現if else運算式參見：http://www.w3cgroup.com/article.asp?id=131

五、將CSS，JS檔案合并到一個檔案（非BT愛好者還是不要玩了^_^）

參見：http://www.w3cgroup.com/article.asp?id=29

六、避免Javascript事件綁定出現記憶體流失

"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog

參見：http://www.w3cgroup.com/article.asp?id=207

七、使用WEB Workers技術（支援html5的瀏覽器）

Web Workers為JavaScript提供了一種能在後台進程中啟動並執行方法，Web Workers進程能夠在不影響使用者介面的情況下處理任務。

參見：http://www.w3cgroup.com/article.asp?id=242

八、Y!14條（14 Rules for Faster-Loading Web Sites）

    *  Rule 1 - Make Fewer HTTP Requests
    * Rule 2 - Use a Content Delivery Network (Server端)
    * Rule 3 - Add an Expires Header (Server端)
    * Rule 4 - Gzip Components (Server端)
    * Rule 5 - Put Stylesheets at the Top
    * Rule 6 - Put Scripts at the Bottom
    * Rule 7 - Avoid CSS Expressions
    * Rule 8 - Make JavaScript and CSS External
    * Rule 9 - Reduce DNS Lookups (Server端)
    * Rule 10 - Minify JavaScript
    * Rule 11 - Avoid Redirects (Server端)
    * Rule 12 - Remove Duplicate Scripts
    * Rule 13 - Configure ETags (Server端)
    * Rule 14 - Make AJAX Cacheable
    * Rule 15 - Use Iframes Wisely

參見：http://www.w3cgroup.com/article.asp?id=97

九、微軟早期的DHTML最佳化建議

    * 使用數組push替代字串累加

原創文章，轉載請註明出處http://www.w3cgroup.com/article.asp?id=255