在哪里放置我的JS代碼以及在何處/如何加載多個jQuery插件？

Question

我有幾個問題有些相關，所以我將它們全部發布在SO上的一個問題上......

問題1：

我目前正在使用這個Facebook應用程序，我正在使用jQuery UI Tabs，其中只有4個，其中2個是通過Ajax加載的。 主頁面是index.html，這是放置標簽代碼的地方，對於通過Ajax加載的2個標簽，我有兩個不同的文件，tab1.html和tab2.html。

目前，jQuery標簽初始化和Facebook JavaScript初始化是在index.html上完成的。 tab1.html和tab2.html都包含屬於這些頁面的JavaScript代碼。 例如，tab2.html有一個表單，並且有一些JS（帶有jQuery）代碼來驗證表單，這段代碼與tab1.html無關，因為tab1.html上的JS代碼與tab2.html無關。

我的問題是，我應該繼續這樣做，還是將index.html，tab1.html和tab2.html中的所有JS / jQuery代碼匯總到一個global.js文件中，然后將其包含在index.html中？

我雖然這樣做，但如果用戶從未打開tab1或tab2，將會加載不相關的代碼。 使用單個global.js文件的好處是我可以打包/縮小文件，如果我在每個相應的tabX.html文件中包含每個代碼塊，我就無法做到。

問題2：

當我使用jQuery時，我也使用了很多插件（實際上現在只有3個，但這個數字可以增長）。 其中一些提供了縮小的JS，我在可用時使用它們，當它們不可用時，我使用正常版本。

還有請求問題。 如果我有很多插件，比如10，那么這些插件就會有10個請求。 而且還有一些插件在tab1.html中使用但在tab2.html和反之亦然。

如何在單個Web請求中加載縮小/打包版本中的所有插件？ 我應該在發布我的應用程序之前手動執行此操作（打包並將它們合並到一個文件中），還是可以使用Dean Edwards的Packer的PHP版本並即時打包/合並所有插件？ 這會是一個好方法嗎？

問題3：

如果Q1上的答案類似於“合並單個global.js文件中的所有代碼”，那么我是否應該在上面描述的Q2中的打包/合並腳本中包含global.js文件？

這樣做可以簡化一切。 我可以使用所有.js文件正確組織我的開發環境，插件和相應文件夾中的global.js，而不用打擾其他任何東西。 打包/合並應該處理其余部分（從相應的文件夾中提取文件，發送相應的JS頭並輸出一個打包的.js文件）。

讓我最困惑的一件事是，並非所有插件都用於每個選項卡，並非所有代碼都適用於每個選項卡。 盡管如此，一大塊代碼對於每個選項卡和索引都是全局的。 這也簡化了所有內容：a）我不必擔心將所需的代碼添加到每個tabX.html文件中，我可以簡單地將它們看作HTML模板而不是其他內容; b）我不必費心去包含我需要它們的必要插件，因為我現在正在使用jQuery中的$ .getScript（）來加載我需要的插件，並且只在我需要它時，但我是不確定這是一個好方法，代碼感覺像這樣臟和丑。

Answer 1

問題1：

將它們全部打包到一個.js文件中。 這將使維護更容易，並且用戶加載他們可能不使用的小js的微小開銷並不重要。 我還會讓Google為您加載jQuery庫，然后將所有js代碼放在一個單獨的文件中。

問題2：

由於這些插件並沒有真正改變，我會手動組合它們。 Closure Compiler很擅長這個。 縮小時使用不提供任何警告的最高設置。

問題3：

是的，你會想要縮小global.js

當瀏覽器下載global.js時，它會被緩存一段時間。 因此，當您在另一個頁面上再次調用整個global.js時，它不會重新下載，它會首先查看您的本地副本。 所以你在初始下載時首先做了一些工作，但從那時起，它應該更快。

Answer 2

通常，與加速網站加載的javascript相關的最佳做法是：

1. 縮小所有javascript並將其全部放入單個文件中（盡可能多地在外部創建javascript）。
2. 將javascript放在文檔的底部。
3. 強制Web服務器在將來指定到期日期並使用帶時間戳的查詢字符串來使舊版本的javascript文件無效，這樣可以防止對javascript的不必要請求（如果它沒有更改）。 （即：在httpd.conf中的ExpiresByType application/x-javascript "access plus 1 year" ，在您的文檔中： <script type="text/javascript" src="/allmy.js?v=1285877202"></script> ）
4. 配置Web服務器以gzip所有文本文件。

Answer 3

你應該從標簽頁中保留太多javascript的主要原因是因為它會破壞用戶體驗。 當用戶第一次點擊選項卡時，它將抓取動態所需的所有組件，這使得它有點遲緩。

您的問題只是半特定的，因為我們不了解您網站的很多內容，例如確切的文件大小，模塊的實際使用方式。

一般的想法是在模塊化和速度之間找到平衡 。

當您將模塊組合在一起時，這些是您應該考慮的一般想法：

• 這個模塊經常變化多久？
• 這個模塊多久使用一次？
• 這個模塊有多大（文件大小）？

然后把最常用，穩定的代碼庫合並為一個。 然后，您應該在選項卡頁面上包含其他站點特定的功能。

此外，請確保異步加載javascript，因為它不會阻止頁面（和選項卡）的呈現。

Answer 4

另一個綜合答案：

如果在打包/迷你版本中添加所有JS，生成的文件大小不超過30k，那么最好將它組合起來。 文件的一個額外連接（假設它沒有被緩存）值得10-20k的額外JS下載。 這與瀏覽器打開和關閉連接與已建立連接上的額外20k流量有關。 閾值還取決於您的用戶分布。 如果您有大量撥號或低帶寬用戶，您的閾值將會更小。

我通常建議組合並加載為1個文件，除非庫非常模糊，並且需要一個非常有優勢的案例才能在頁面上觸發它。 例如：懸停觸發功能Y，但它位於反饋小部件上，占用的流量不到1％ - 不要打擾組合。

如今，縮小和包裝有點被高估了。 由於絕大多數瀏覽器都支持gZip，因此在瀏覽器傳輸過程中gZip通過線路提供的數據整合量與min / pack實際上具有相同的效果。 但是，瀏覽器打開它的成本很低。 話雖如此，由於並非所有瀏覽器都支持它，因此對代碼進行縮小/打包仍然是一種好習慣，您可能不希望該文件被啟用gZip等。

我使用在線打包機對抗第三方模塊，它運行得相當好。 但是，有時可能會導致問題，因此請確保在部署之前測試手動打包的版本。

備用：

如果您認為您的用戶將在索引頁上停留超過10秒，則可以使用Js Loader Prototype模式單獨預加載其他庫。

Answer 5

Steve Souder的“更快的網站”是一本你應該研究的書。

首先，一種體驗會減慢，因為無論何時鏈接外部腳本，瀏覽器都會等待腳本下載，解析然后執行。 在此之后，它只重新處理剩余的請求。 因此，為了避免這種緩慢下降，可以考慮平行下載腳本。 如果腳本位於同一個域中，則腳本Ajax很少，如果腳本位於外部域，則使用Script Dom元素或iframe中的腳本

Q1：對於我來說，如果必須不斷更改頁面內容，那么所有內容的模塊化是進一步開發的更好選擇。 響應性對最終用戶非常重要。 一個小的global.js將有助於啟動和運行應用程序。平行地，可以下載tabX.html。

Q2：由於jquery插件很少改變。 tabX.html頁面的插件可以並行下載並本地緩存，因此當加載tabX.html時，無需獲取所需的插件。 因此，主頁面所需的所有插件應該在一個文件中，而tabX.html使用的插件應該在不同的文件中。

Q3：這是個人選擇。 您希望它是開發人員友好還是用戶友好。 我依靠用戶友好性。 制作響應迅速且高效的應用是我們的工作！ 將所有內容打包成單個文件的所有優點是您可以輕松開發。 好丑的代碼會產生漂亮的應用程序:)。 用戶是速度致命的。 例如。 當谷歌將每頁10個結果更改為20時，他們發現搜索查詢數量大幅下降。 所以我的意見不是將它們全部打包成一個並平行加載

測試每個的一些技術和相關鏈接：

XHR eval / ajax： http ：//stevesouders.com/cuzillion/？ex = 10009

XHR注射： http ：//stevesouders.com/cuzillion/？ex = 10015

Iframe中的腳本： http ：//stevesouders.com/cuzillion/？ex = 10012

腳本DOM元素： http ： //stevesouders.com/cuzillion/？ex = 10010

Answer 6

問題1：

最佳做法是將所有js文件放在一個“全局”文件中。 這樣可以最大限度地減少HTTP請求。 假設你有5個插件，這就是我需要做5個請求，如果你把它們合並為一個，你只需要請求一次。 這可能在第一次加載時有點沉重，但下次瀏覽器會緩存此文件，所以......不用擔心大小。 但是 ，在組合腳本時要小心腳本的順序。 （IE：在JQuery UI之前，JQuery腳本應首先放在js文件中）

http://articles.sitepoint.com/article/web-site-optimization-steps/4

http://code.google.com/speed/page-speed/docs/rtt.html

問題2：你可以手動或自動完成.Dean Edward的Packer是一個不錯的選擇。 如果您正在使用ASP.NET，則可以檢查MB Compression Handler ，如果您正在使用帶有PHP的APACHE，也許您可​​以將htaccess的配置更改為gzip

問題3：如果你打包“全局”javascript文件也會更好。 這可以節省帶寬並節省更多的加載時間。 您明白了這一點，結合您網站所需的所有js文件將節省您包含單個腳本的時間。