高性能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請求的時間。
• 變量的使用
  1. 盡量使用局部變量，如果需要多次引用當前作用域之外的變量，最好先將該變量緩存為局部變量使用；
  2. 所有變量都必須使用var聲明；
• DOM樹操作
  1. getElementsByName、getElementsByClassName和getElementsByTagName等方法返回的是HTML集合對象不是一個真正的數組，並且該集合處於實時狀態 （更新HTML，則相應的集合也會立刻更新），所以遍歷時需要緩存length來提高效率，必要時可以將HTML集合先拷貝到普通數組中再處理；
  2. 合並多次對DOM和樣式的修改，使用element.style.cssText = "float:right;margin-left:20px;"這種方式，以避免瀏覽器發生多次重排或重繪；
  3. 離線操作DOM樹：對DOM樹結構進行較大的改變時，需要先將元素脫離文檔流，然后進行改變操作，最后再放回到文檔流中；
     • 可以將元素隱藏來使其脫離文檔的正常流；
     • 使用createDocumentFragment創建文檔碎片節點；
• 邏輯操作
  1. 只有在需要遍歷對象的時候使用for-in循環，否則請使用for，while，do-while循環；
  2. if-else的排列從大概率到小概率，把出現最多的情況寫在前面；有時也可以使用嵌套的if-else-if 這種方式，以減少條件的判斷次數；
  3. 條件語句中需要測試的條件數量越大，越推薦使用switch來代替if-else；
  4. 當連接大量字符串時，在IE6 IE7 中字符串連接使用數組的join方式，其他瀏覽器中使用“+”或“+=”操作符；
• 其他
  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);

注：

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

參考資料：

1. 《高性能JavaScript》

特別聲明：

　　本文章，發表在博客園的同時，也發布到我的個人博客地瓜哥上。轉載請注明作者和原文網址。
地瓜哥：http://www.diguage.com/archives/37.html
博客園：http://www.cnblogs.com/diguage/archive/2012/07/25/2607620.html