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 內存洩漏的問題。