Question

我想根据浏览器版本有条件地加载几个polyfill。例如，如果某人使用某个版本的IE来访问我的网站并且不支持document.addEventListener，那么它应该加载相应的polyfill。

Yepnope似乎是理想的工具，但它已被弃用，以支持更好的做法。根据其开发人员的说法，这些是原因：

在有条件地装货时，我们建议您为您正在测试的事物的每个组合输出构建。 [...]。然后你可以将脚本内联到您的页面只加载（异步！）一个构建的脚本被调整到该用户的功能。所有表现的胜利条件加载，并没有加载100的延迟问题事情一下子。

那么，这与Yepnope的原始方法有何不同？这不正是Yepnope的目的吗？是否有任何其他轻量级脚本可以做到这一点，而不依赖于Modernizr或JQuery？

有关填充料的最佳做法是什么？检测浏览器版本或按功能确定功能？

这些问题很多，但我认为，它们都与同一问题有关。谢谢！

Answer 1

在旧方法中，可以加载许多脚本。脚本加载器（是Yepnope或其他）测试您指定的功能，并且对于每个测试，它选择要加载的脚本。

作为一个简单的例子，让我们假设您要加载自己的脚本，加上支持IE＆lt; 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 conditional tags

有条件地加载脚本

2 个答案: