有條件地加載腳本

Question

我想根據瀏覽器版本有條件地加載幾個polyfill。 例如，如果有人使用IE版本訪問我的不支持document.addEventListener網站，則它應加載相應的polyfill。

Yepnope似乎是實現此目的的理想工具，但為了更好的做法而棄用了它。 根據其開發人員的說法，這些是原因：

在有條件地加載內容時，建議您為要測試的內容的每種組合輸出一個構建。 [...]。 然后，您可以將腳本內聯到您的頁面中，該腳本僅（異步！）加載已調整為該用戶功能的單個構建腳本。 條件加載的所有性能優勢，一次加載100個事物的延遲問題都沒有。

那么，這與Yepnope的原始方法有何不同？ 這不是Yepnope的初衷嗎？ 是否有其他輕量級腳本可以執行此操作而無需依賴Modernizr或JQuery？

關於填充填充的最佳實踐是什么？ 是檢測瀏覽器版本還是根據功能確定功能？

這些問題很多，但我認為它們都與同一問題有關。 謝謝！

Answer 1

在舊方法中，可以潛在地加載許多腳本 。 腳本加載器（是Yepnope或其他工具）會測試您指定的功能，並且對於每次測試，都會選擇要加載的腳本。

舉一個簡單的例子，假設您要加載自己的腳本，並在需要時添加支持IE <9的jQuery版本，或者在可能的情況下使用更新的jQuery：

yepnope({
    "test" : document.attachEvent,
    "yep" : 'jquery-1.11.3.js',
    "nope" : 'jquery-2.1.4.js'
});
yepnope({
    "load" : "myscript.js"
});

在新方法中，您僅加載一個腳本：它可能具有多個版本，但是瀏覽器只關注其中一個版本 。 這些不同的版本將處理瀏覽器功能的不同組合，但是瀏覽器（和用戶）只需要關心一個文件。 腳本加載器運行其測試，並根據結果選擇要下載的版本。

使用上面的示例執行此操作將需要兩次構建myscript.js 。 對於現代瀏覽器，一個版本將與jQuery 2.x串聯，而對於舊版本的瀏覽器，另一個版本將與jQuery 1.x串聯。 你可以做在這種情況下yepnope工作，假設你創建建立的其他方式。 看起來像這樣：

yepnope({
    "test" : document.attachEvent,
    "yep" : "myscript-oldie.js",
    "nope" : "myscript-modern.js"
});

但這留下了使用什么構建工具的問題。 許多其他腳本加載器（require.js，Browserify，webpack等）已經帶有自己的構建腳本工具。 是的，Yepnope並沒有這樣做，其背后的人們決定其他裝載程序已經在構建比他們更好的腳本。

為什么這樣 網絡延遲。 許多腳本（也許大多數）都足夠小，以至於建立和拆除HTTP請求比花費下載文件的實際工作花費更多的時間 。 如果可以將它們全部合並到一個文件中，則只需一個HTTP請求即可獲取整個腳本，而不必為每個模塊都發出一個請求。 即使下載的數據量並未真正改變，這也可以提高性能。

Answer 2

當只是幾個polyfill時，沒關系-文件將很小，因此您可以將其發送到每個瀏覽器。 不要忘記緩存和壓縮-只需正確設置服務器，您的polyfills文件將只加載一次，而且速度非常快。 在遇到性能問題之前，請不要考慮過多的應用程序。

此外，如果您要專門為IE添加它，請使用IE條件標簽