優化JavaScript加載的最佳實踐

Question

我已閱讀了一些關於優化JavaScript加載的文章。 我得到的幾個關鍵點是儘量減少腳本文件（http請求）的數量，縮小並在服務器上啓用gzip。目前，我所做的是所有的JavaScript文件都被縮小了，並且gzip也可以被簡單地啓用。

第1部分）

我的問題是，我有大約20 JavaScript文件，有一個擁有所有的核心功能之一common.js。除此之外，每個頁面至少會加載一個實現該頁面功能的其他文件。

解決方案1，將所有腳本合併到一個大腳本文件中，併爲每個客戶端加載一次，這似乎是其他人正在做的。我猜YUI或JSMin可以用於壓縮，所以我應該手動合併文件？

解決方案2，當需要一個需要的函數時，延遲加載，我真的不知道這是如何工作的，但它似乎是一種方法，但仍然需要更多的http請求。我很想聽聽有關這方面的任何投入。

第2部分）

我工作的Web應用程序將被部署到許多其他計算機，因爲JavaScript的是非常小的，它是一個很好的做法，使一個腳本，從中央動態加載最新的腳本服務器，以便每個客戶端都能運行最新的腳本？

Answer 1

第1部分：就像你說的，有兩種方法。

• 解決方案1是有效的，並且有工具可以做到這一點，包括Google's Closure Compiler。問題是，在大多數情況下，爲了正常工作，需要包含您網站上的每一個腳本，因此無論您的網頁可能使用什麼，它都會獲得一切
• 解決方案2也是有效的，但正如您所說的那樣，實際上阻​​止了多個http請求。但它的優點在於它只在需要時加載所需內容，並且在初始頁面加載時不會創建任何阻止調用。 Head.js是一個提到的選項，以及Require.js和其他。

2部分：

• 有辦法強制瀏覽器總是下載最新的JavaScript文件，儘管這種否定瀏覽器緩存的好處。一種常見的方法是在JavaScript URL的末尾添加get變量，即「domain.com/index.js?timestamp=_123123123」。這與jQuery在爲其ajax調用關閉緩存時所做的相似。

Answer 2

一般的最佳做法被認爲是

1. 合併後的文件儘可能

2. 縮減大小

3. 即成gzip壓縮

4. 即成儘可能晚的（一些可能需要處於首位，但通常在首選之前或異步首選

這是一般性建議，您需要執行此操作並進行測試以確保它適合您的情況。

儘量減少HTTP請求是很重要的，延遲是一個性能殺手......

Answer 3

你必須打破優化成幾個步驟

1. 優化源代碼：有良好做法寫出具有較少的DOM開銷，產生更少的變量和DOM元素在內存中，高效循環JS代碼，等等。這些通常不能通過腳本編譯器進行優化。
2. 縮減大小：這有兩個解決方案
   • 合併成一個文件，並縮小（使用谷歌的關閉編譯器，Uglify）
   • 縮減大小的每個文件，然後延遲加載。我個人喜歡用AMD模塊化模式來定義我的模塊。您可以使用啓動文件選擇編譯爲一個文件或保留模塊結構和延遲加載，但每個模塊都會被縮小。
3. 服務器優化
   • 請問您的服務器成爲壓縮的javascript？
   • 嘗試儘可能使用<script src='//...' async defer>，如果您有腳本依賴性，請在使用asycn加載時小心。如果你使用AMD模塊，它將確保你的依賴模塊被預先加載，並且它們每個頁面只刷新一次。
   • 使用CDN服務您的靜態內容，存儲內容分發網絡