Question

我有以下内容：

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
anotherplugin.js
的ga.js

或者它是异步和有序加载的组合，如下所示：

首先加载jquery.min.js
然后将someplugin.js和anotherplugin.js加载为async
最后，ga.js已加载

我很难测试它是哪种情况。

Answer 1

你选择了一个相当复杂的例子进行剖析。所以让我们分步进行。

三个参数集{...},{...},{...}将按顺序执行。
在第一个参数集中，您将从谷歌的CDN加载jQuery，然后在完成时测试jQuery是否实际加载。如果不是（可能您正在离线开发并且无法访问Google CDN），则加载jQuery的本地副本。所以这些是“顺序的”，但实际上只有其中一个会加载。
在第二个参数集中，您同时并异步加载someplugin.js和'anotherplugin.js`。所以它们将被并行下载。当你可以同时并行两个项目时，这是很棒的，因为这是今天浏览器的“最薄弱环节”（仅限IE浏览器，其他每个浏览器将同时并行6-8个文件）。
在第三个参数集中，您加载了Google Analytics（分析）脚本。

记住modernizr是一个工具集合。包含的加载器实际上只是一个重新打包的 yepnope 。所以你可以谷歌更多关于yepnope。

顺序加载的想法是能够确保依赖性按顺序加载（例如，jQuery插件必须在jQuery框架之后加载）。参数集二中并行下载语法的目的是加速多个不相依的文件的性能（例如，一旦加载jQuery，你可以并行加载多个jQuery插件，只要它们不依赖于彼此）

所以为了回答你的问题，你的假设＃2是正确的。如果您想使用firebug进行更多探索，请在每个参数集的完整函数中添加一些console.log语句。您应该每次都看到3组按顺序完成。现在将firebug切换到“Net”选项卡以观察文件请求是否已经消失。文件someplugin.js和'anotherplugin.js`不一定每次都以相同的顺序加载。请求将按顺序发出，但是时序条应该重叠（将它们显示为并行）。在本地测试这将很难，因为它会如此之快。将您的两个测试文件放在某个地方的慢速服务器上，或者将它们与您期望的相反（使第一个文件为1mb，第二个<1kb），这样您就可以在firebug的网络监视器选项卡中看到重叠的下载（这是只是一个用于测试目的的人工场景，你可以用重复的JS注释填充一个文件，只是为了制作一个人为的慢速文件进行测试。

编辑：为了更准确地澄清，我想在yepnopejs.com主页上添加引用。 yepnopejs是在modernizr中包含（和别名）的资源加载器：

简而言之，无论你把它们放在哪个顺序，那就是我们的顺序执行它们。执行'load'和'both'文件集在''yep'或'nope'之后，但是你的具体顺序在这些集合中也保留。这并不意味着文件总是按此顺序加载，但我们保证它们在此执行订购。由于这是一个异步加载器，我们将所有内容加载到同时，我们只是延迟运行（或注入它）直到时间恰到好处。

所以是的，您可以放置jquery，然后在同一个Modernizr.load语句中添加一些插件，它们将被并行下载并按照参数中指定的顺序注入DOM。你在这里唯一放弃的是测试jQuery是否成功加载的能力，如果有必要，可能会获取jQuery的备份非CDN版本。因此，您可以选择重要的后备支持。（我没有任何消息来源，但我似乎记得谷歌CDN在其整个生命周期中只下降了一次）

Modernizr - 哪些脚本异步加载？

1 个答案: