高效能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