優化javascript加載的最佳實踐

Question

我在網上閱讀了一些關於優化javascript加載的文章。 我得到的幾個關鍵點是最小化腳本文件（http請求）的數量，縮小和啟用服務器上的gzip。 目前，我所做的是所有javascript文件都縮小了，gzip也可以簡單地啟用。

第1部分）

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

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

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

第2部分）

我正在處理的Web應用程序將部署到許多其他計算機，因為javascripts非常小，制作一個從中央服務器動態加載最新腳本的腳本是一個好習慣，這樣每個客戶端都將運行最新的腳本？

Answer 1

一般最佳實踐被認為是

1. 合並為盡可能少的文件

2. 縮小

3. 服務gzipped

4. 服務盡可能晚（有些可能需要在頭部，但通常在優先之前或異步

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

最小化HTTP請求很重要，延遲是性能殺手......

Answer 2

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

• 解決方案1有效，並且有工具可以執行此操作，包括Google的Closure Compiler 。 問題是在大多數情況下，它需要包含您網站上的每個腳本才能正常工作，因此無論您的網頁可能使用什么，它都會獲得所有內容
• 解決方案2也有效，但是就像你說的那樣並不能真正阻止多個http請求。 但它的好處在於它只在您需要時加載您需要的內容，並且不會在初始頁面加載時創建任何阻塞調用。 Head.js是一個被提及的選項，以及Require.js和其他。

第2部分：

• 有一些方法可以強制瀏覽器始終下載最新的javascript文件，盡管這種方式否定了瀏覽器緩存的好處。 一種常見的方法是在javascript URL的末尾添加一個get變量，即“domain.com/index.js?timestamp=_123123123”。 這類似於jQuery關閉其ajax調用的緩存時所執行的操作。

Answer 3

您必須將優化分為幾個步驟

1. 優化源代碼：編寫具有較少DOM開銷的JS代碼，在內存中創建較少的變量和DOM元素，有效的循環等等都有很好的做法。這些通常無法通過腳本編譯器進行優化。
2. 縮小：這有兩個解決方案
   • 合並到一個文件並縮小。（使用Google的Closure Compiler， Uglify ）
   • 縮小每個文件，然后延遲加載。 我個人喜歡使用AMD模塊化模式定義我的模塊。 您可以使用引導文件選擇編譯為一個文件或保留模塊結構和延遲加載，但每個模塊也都縮小了。
3. 服務器優化
   • 你的服務器是否提供gzip壓縮包？
   • 盡可能使用<script src='//...' async defer> ，如果你有腳本依賴，在使用asycn加載時要小心。 如果您使用AMD模塊，它將確保您的相關模塊提前加載，並且每頁刷新只加載一次。
   • 使用CDN提供靜態內容，將圖像，文件，javascript存儲在Content Delivery Network上