Web 前端最佳化最佳實務之 JavaScript 篇

作者: Fenng | 可以轉載, 轉載時務必以超連結形式標明文章原始出處和作者資訊及著作權聲明
網址: http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_javascript.html

Web 前端最佳化最佳實務之 JavaScript 篇，這部分有 6 條規則，和 ">CSS 篇 重複的有幾條。前端最佳化最佳實務，最重要的還是"實踐"，要理解這東西容易得很，關鍵是要去"實踐"，去"執行"，去"反饋"，去擷取受益。

1. 指令碼放到 ">HTML 字碼頁底部 (Put Scripts at the Bottom)

當一個指令碼在下載的時候，瀏覽器幹不了其它的事兒(串列了)。所以，把它扔到最後面去處理。對於一些功能性的指令碼，可能實現起來有些兩難。不過對於國內網站來說，有很多使用 Google Analytics 服務進行網站資料分析的。這這一點來說，絕對可行的建議，放到頁面最底下。

2. Make JavaScript and ">CSS External

參見 CSS 篇的描述

3. 精簡 JavaScript 與 ">CSS (Minify JavaScript and ">CSS)

參見 CSS 篇的描述

4. 移除重複指令碼 (Remove Duplicate Scripts)

對於一些曆史遺留網站或是論壇類的網站來說，這倒是比較常見的。接手維護人前後變化過多，每個人都有自己的一套。這就會帶來一些潛在的麻煩。

5. 減少 ">DOM 訪問 (Minimize ">DOM Access)

有三條指導建議:

• 緩衝已經訪問過的元素 (Cache references to accessed elements)
• "離線"更新節點, 再將它們添加到樹中 (Update nodes "offline" and then add them to the tree)
• 避免使用 JavaScript 輸出頁面配置--應該是 ">CSS 的事兒 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解釋外，這裡也提醒一下注意關於 Java Script 記憶體流失的問題。

另外推薦一篇《如何最佳化 JavaScript 指令碼的效能》.

後記1) ：整理得差不多之後，發現網路上已經有一篇 《Yahoo!網站效能最佳體驗的34條黃金規則》，是翻譯稿。看來我做了一部分重複勞動。

後記 2)：CSS / JavaScript 都有最佳化規則。但似乎缺少了對 Flash 的最佳化實踐。