性能加載js文件

Question

我想知道什么是最好的。 我有不同的JS函數，例如我有手風琴插件，即聯系頁面的腳本。 但是我只在一頁上使用每個腳本，例如“常見問題頁面”使用的是手風琴JS，而不是使用聯系JS。 這與許多其他示例（我的js目錄的總大小為460kb，分開在不同的文件中）

那么最好的方法是將所有腳本放在一個文件中，然后將其加載到我的標頭模板中，或者將它們分成大約10個不同的文件，並在需要時加載它們？

問候

Answer 1

您要將它們全部放在一個文件中。 它減少了到服務器的旅行次數並減少了開銷。

通常建議將它們放在文檔末尾，因為這樣可以提前下載其余頁面。

這是一個鏈接，描述了Yahoo關於在何處包含腳本的最佳做法，以及有關最大限度地減少服務器訪問次數的鏈接。 http://developer.yahoo.com/performance/rules.html

Answer 2

“最佳”通常並非一刀切。

將文件合並在一起意味着更少的連接，並且（假設您的緩存設置正確）它將使您的第一個頁面視圖獲得成功，然后所有其他頁面都將從中受益。

將它們分開可以使您在緩存方面具有更高的粒度，但這要付出很多連接的代價（每個連接都有相關的開銷）。 請記住，許多瀏覽器僅對任何給定的主機名建立2個連接。 這是HTTP規范強加的舊限制。

通常，“最佳”是找到一種將它們分成足夠大的組的方法，對於任何一個頁面，您都不會下載過多的內容，但是您可以在頁面之間共享很多內容。 減少擔心下載過多的群組，以免受到影響。

無論采用哪種方式，請確保壓縮腳本（刪除空格，注釋等），將其壓縮為GZipped或Deflated，然后適當地設置expire標頭，以免用戶一次又一次地下載相同的腳本。

Answer 3

我會根據到處或僅在某處使用的內容將其分為兩三個文件。

同樣，使用那么多的代碼，您應該考慮減少代碼以減少下載時間。 我以前使用過YUI Compressor ，表現出色，並且易於集成到構建文件中。

Answer 4

將它們組合成一個文件-這意味着更少的HTTP請求。

但是， 在CSS和JS文件上設置到期標頭非常重要 。 您應該始終設置這些標頭，但是如果強迫用戶重新下載每個頁面加載的10個文件的內容，則尤為糟糕。

Answer 5

如果您確實僅在單個頁面上使用每個功能，則將它們組合到一個文件中不會帶來太多收益。 加載訪客首先訪問的頁面將花費更長的時間，但是后續頁面的加載速度會更快。

如果大多數腳本只用在幾個頁面上，那么弄清楚訪問者可能會首先點擊哪些頁面（主頁面，以及所有具有書簽功能的頁面）並為這些頁面生成組合的js文件，因此將它們加載為盡快。 然后，只需將使用較少的腳本加載到它們使用的任何頁面上即可。