我有以下内容:
Modernizr.load([
{
load : '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js',
complete : function () {
if ( !window.jQuery ){
Modernizr.load('/js/jquery-1.6.2.min.js');
}
}
},
{
load : ["/js/someplugin.js", "/js/anotherplugin.js"],
complete : function()
{
// do some stuff
}
},
{
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
}
]};
我读到 Modernizr 异步加载脚本。但是在上面的例子中，哪些是异步加载的呢？
是否所有以下内容都是异步加载的？
- jquery.min.js
- someplugin.js
- 另一个插件.js
- ga.js
或者它是像这样的异步和有序加载的组合:
- 首先加载 jquery.min.js
- 然后异步加载 someplugin.js 和 anotherplugin.js
- 最后，加载 ga.js
我很难测试它是哪种情况。
最佳答案
您选择了一个相当复杂的示例进行剖析。因此，让我们分步进行。
- 三个参数集
{...},{...},{...}将按顺序执行。 - 在第一个参数集中，您将从谷歌的 CDN 加载 jQuery，然后在完成后测试 jQuery 是否实际加载。如果没有(也许您正在离线开发并且无法访问 google CDN)，则加载 jQuery 的本地副本。所以这些是“顺序”的，但实际上只有其中一个会加载。
- 在第二个参数集中，您同时异步加载
someplugin.js和 'anotherplugin.js`。所以它们将被并行下载。一次可以并行处理 2 个项目，这是非常棒的，因为这是当今浏览器的“最薄弱环节”(是的，只有 IE，其他所有浏览器一次并行处理 6-8 个文件)。 - 在第三个参数集中加载谷歌分析脚本。
请记住，modernizr 是一个工具集合。包含的加载程序实际上只是一个重新打包的 yepnope 。因此，您可以通过谷歌搜索有关 yepnope 的更多信息。
顺序加载的想法是能够确保依赖项按顺序加载(例如，您的 jQuery 插件必须在 jQuery 框架之后加载)。参数集二中并行下载语法的目的是加快多个不相互依赖的文件的性能(例如，一旦加载 jQuery，只要它们不相互依赖，您就可以并行加载多个 jQuery 插件) .
因此，为了回答您的问题，您的假设 #2 是正确的。如果您想使用 firebug 进行更多探索，请在每个参数集的完整函数中添加一些 console.log 语句。您应该每次都能看到这 3 组按顺序完成。现在将 firebug 切换到“网络”选项卡上以观察文件请求。文件 someplugin.js 和 'anotherplugin.js` 不一定每次都以相同的顺序加载。请求将按顺序发出，但计时条应该重叠(显示为平行)。在本地进行测试会很困难，因为它会非常快。将您的两个测试文件放在某处慢速服务器上，或者将它们与您期望的相反(使第一个文件为 1mb，第二个 <1kb)，这样您就可以在 firebug 的网络监视器选项卡中看到重叠的下载(这只是一个用于测试目的的人工场景，你可以用重复的 JS 注释填充一个文件，只是为了制造一个人为的慢文件用于测试)。
编辑:为了更准确地阐明，我想添加来自 yepnopejs.com 的引述主页。 yepnopejs 是 modernizr 中包含(和别名)的资源加载器:
In short, whatever order you put them in, that's the order that we execute them in. The 'load' and 'both' sets of files are executed after your 'yep' or 'nope' sets, but the order that you specificy within those sets is also preserved. This doesn't mean that the files always load in this order, but we guarantee that they execute in this order. Since this is an asynchronous loader, we load everything all at the same time, and we just delay running it (or injecting it) until the time is just right.
所以是的，您可以在同一个 Modernizr.load 语句中放置 jquery，然后是一些插件，它们将被并行下载并按照参数中指定的相同顺序注入(inject)到 DOM 中。您在这里唯一要放弃的是测试 jQuery 是否成功加载的能力，并可能在必要时获取 jQuery 的备份非 CDN 版本。因此，您可以选择后备支持对您有多重要。 (我没有任何消息来源，但我似乎记得谷歌 CDN 在其整个生命周期中只发生过一次故障)
关于javascript - Modernizr - 哪些脚本被异步加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8496652/