高性能JavaScript

　　在“高性能網站的十四條黃金法則”中，我高度概括性的介紹了建設高性能網站的十四條操作指南；在“使用微軟CDN優化網頁加載速度”中，我介紹了使用微軟提供的CDN服務提高我的網站的加載速度。今天，我還要接著“高性能”來展開論述。

　　在“十四條黃金法則”中，第六、八、十、十四等四條法則都和JavaScript中有著直接的關系。可見，JavaScript在Web開發中占據著多么重要的作用。

　　根據Nicholas Zakas的研究顯示，在多數瀏覽器使用單進程處理UI更新和JavaScript運行等多個任務，而同一時間只能有一個任務被執行。 JavaScript運行了多長時間，那么在瀏覽器空閑下來響應用戶輸入之前的等待時間就有多長。從基本層面說，這意味著<script>標簽的出現使整個頁面因腳本解析、運行而出現等待。

　　綜上所述，提高JavaScript的性能，是提高用戶體驗的一個重要途徑。那么，我們可以從哪些方面提高JavaScript的性能呢？下面，我從“腳本引入位置”、“變量的使用”、“DOM樹的操作”等幾個方面來簡要論述一下。

• JavaScript腳本的引入位置

  1. <script>標簽的引入位置最好放在</body>（注意：是body的結束標簽）之前，以并且僅靠</body>。這樣，可以減少JavaScript解析對頁面渲染的阻塞；
  2. 盡量將一個頁面中出現的多個JavaScript文件合并成一個JavaScript文件。這樣，可以減少http請求次數，節省瀏覽器發起、接受以及解析HTTP請求的時間。
  </ol> </li>
  3. 變量的使用

     1. 盡量使用局部變量，如果需要多次引用當前作用域之外的變量，最好先將該變量緩存為局部變量使用；
     2. 所有變量都必須使用var聲明；
     </ol> </li>
     3. DOM樹操作

        1. getElementsByName、getElementsByClassName和getElementsByTagName等方法返回的是 HTML集合對象不是一個真正的數組，并且該集合處于實時狀態 （更新HTML，則相應的集合也會立刻更新），所以遍歷時需要緩存length來提高效率，必要時可以將HTML集合先拷貝到普通數組中再處理；
        2. 合并多次對DOM和樣式的修改，使用element.style.cssText = "float:right;margin-left:20px;"這種方式，以避免瀏覽器發生多次重排或重繪；
        3. 離線操作DOM樹：對DOM樹結構進行較大的改變時，需要先將元素脫離文檔流，然后進行改變操作，最后再放回到文檔流中；

           • 可以將元素隱藏來使其脫離文檔的正常流；
           • 使用createDocumentFragment創建文檔碎片節點；
           </ul> </li>
           • 
             
           </ol> </li>
           • 邏輯操作

             1. 只有在需要遍歷對象的時候使用for-in循環，否則請使用for，while，do-while循環；
             2. if-else的排列從大概率到小概率，把出現最多的情況寫在前面；有時也可以使用嵌套的if-else-if 這種方式，以減少條件的判斷次數；
             3. 條件語句中需要測試的條件數量越大，越推薦使用switch來代替if-else；
             4. 當連接大量字符串時，在IE6 IE7 中字符串連接使用數組的join方式，其他瀏覽器中使用“+”或“+=”操作符；
             </ol> </li>
             5. 其他

                1. 避免使用eval，Function等函數（需要再次調用解釋引擎）；
                2. 使用[]代替new Array()定義數組，使用{}代替new Object()定義對象;
                3. 盡量避免使用try{} catch{} ，with{}；
                4. 每行代碼結束必須有分號；
                5. 使用setTimeout和setInterval時，避免傳入字符串，而應該傳入函數；
                   如： setTimeout("alert(123)",100); 應該改為：setTimeout(function{alert(123);},100);
                </ol> </li> </ul>

                注：

                • 這是我同事寫的一篇文章。我向他約稿，以他發名義（使用以他名字命名的帳號）發表在“地瓜哥”上。
                </ul>

                參考資料：

                1. 《高性能JavaScript》
                2. 來自:http://www.cnblogs.com/diguage/archive/2012/07/25/2607620.html