網站前端和背景性能優化12

移除重複的腳本 (Remove Duplicate Scripts)

tag:javascript

在同一個頁面中包含兩個相同的腳本檔案降低了性能。這并不如你想象的那麼罕見。在對美國十大網站中的檢查中，發現它們中的兩個包含了重複的腳本。有兩個主要因素增加了一個頁面包含兩個相同腳本的幾率——團隊的大小和腳本的數量。當腳本被重複包含時，由于增加了不必要的HTTP請求和JavaScript的執行，影響了性能。

不必要的HTTP請求在IE中存在，而Firefox終沒有。在IE中，如果一個外部腳本被包含了兩次而且沒有被緩存，在頁面加載的過程中會産生兩次HTTP請求。即使腳本被緩存了，當使用者重載頁面時，多餘的HTTP請求也會發生。

産生多餘的HTTP請求的同時，多次執行腳本也會浪費時間。在Firefox和IE中，無論是否被緩存，腳本都會被重複執行。

避免腳本被意外加載兩次的一個方法是在你的模闆系統中執行一個腳本管理子產品。通常的方式是在HTML頁面中使用SCRIPT标簽來添加一個腳本：

HP 中，可以選擇建立一個叫做insertScript的方法：

<?php insertScript("menu.js") ?>

這個函數不僅僅能防止腳本被重複加載多次，還可以解決腳本的其他問題，比如獨立性檢測以及為腳本添加版本号碼以應對far future Expires頭部。