JS中的RequireJS/AMD獲得多少速度？

Question

實際上，在大型網站上需要多少快捷？

有沒有人對使用異步加載vs不是大型網站的速度做過任何測試？

例如，使用具有許多視圖（> 100）的Backbone，是否最好只是一個視圖對象一次加載所有視圖，然後始終可用，或者它們是否應全部異步加載如所須？

此外，移動與桌面的這些考慮是否有區別？我聽說你想限制移動請求的號碼而不是大小。

Answer 1

我不相信的require.js的意圖是加載所有腳本異步生產。在開發每個腳本的異步加載很方便，因爲您可以對項目進行更改並在沒有「編譯」步驟的情況下重新加載。但在生產你應該combining all of your source files到使用r.js optimizer一個或多個更大的模塊。如果您的大型Web應用程序可以延遲加載模塊的子集，直到稍後（例如，特定用戶操作之後），這些模塊可以單獨進行優化並在生產中異步加載。

關於加載一個較大的JS文件VS多個較小的文件，一般的速度：

「減少HTTP請求」已成爲加快前端性能一般的格言，那就是擔心，甚至在當今移動瀏覽器的世界中更具相關性（通常運行在比寬帶連接慢一個數量級的網絡上）。 [reference]

但也有其他因素，如：

• 移動緩存：iPhones limit the size of files they cache這麼大的文件可能需要每次都被下載，使得許多小文件更好。
• CDN用法：如果您使用的是常見的第三方庫像jQuery的它可能是最好不要將其包含在一個大單的JS文件，而是因爲你的網站的用戶從CDN加載它可能已經有它在其他網站的緩存中（reference）。 欲瞭解更多信息，請參見下面
• 懶惰的評價更新：AMD模塊可以懶洋洋地分析和評估，允許在用戶加載應用下載，同時推遲解析+ EVAL的成本，直至所需的模塊。請參閱this文章以及它引用的其他一些舊文章系列。
• 目標瀏覽器：瀏覽器限制每個主機名的併發下載數。例如，IE 7將只同時從給定主機下載兩個文件。其他限制爲4，其他限制爲6. [reference]

最後，here's a good article by Steve Souders總結了一堆腳本加載技術。

更新：回覆CDN用法：史蒂夫Souders的使用CDN爲第三方庫（例如jQuery的）的posted a detailed analysis標識許多考慮，優點和缺點。

Answer 2

這個問題現在有點老了，但我想我可以加我的想法。

我完全同意rharper使用r.js來組合所有的生產代碼，但也存在分割功能的情況。

對於單頁應用程序，我認爲把所有東西放在一起很合理。對於在頁面交互中具有較大規模的更傳統的基於頁面的網站而言，這可能相當麻煩並導致爲很多用戶加載大量不必要的代碼。

的方法我都用過幾次是

• 定義核心模塊（需要在所有網頁上爲他們正常工作），這被合併成一個單一的文件。
• 創建一個模塊加載器，該加載器瞭解DOM依賴關係和模塊的路徑
• on doc.ready通過模塊加載器循環，並根據特定頁面的需要增強功能所需的異步加載模塊。

這裏的優點是您可以保持最初的頁面權重下降，並且在頁面加載後加載異步腳本時，感知的性能應該更快。也就是說，以這種方式加載的所有功能都應該作爲漸進增強（即表單上的ajax）來完成，以便在加載緩慢或出錯時基本功能仍可用。