Modernizr - 哪些脚本异步加载？

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加载脚本Asyncronously.但在上面的例子中,哪些是异步加载？

是否所有以下内容都是异步加载的？

1. jquery.min.js
2. someplugin.js
3. anotherplugin.js
4. 的ga.js

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

1. 首先加载jquery.min.js
2. 然后someplugin.js和anotherplugin.js被加载异步
3. 最后,加载了ga.js.

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

Answer 1

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

1. 三个参数集{...},{...},{...}将按顺序执行.
2. 在第一个参数集内,您将从谷歌的CDN加载jQuery,然后在完成时测试jQuery是否实际加载.如果不是(可能您正在离线开发并且无法访问Google CDN),则加载jQuery的本地副本.所以这些是"顺序的",但实际上只有其中一个会加载.
3. 在第二个参数集中,您someplugin.js同时和异步地加载和"anotherplugin.js".所以它们将被并行下载.当你可以同时并行两个项目时,这是很棒的,因为这是今天浏览器的"最薄弱的环节"(仅限IE,其他每个浏览器将同时并行6-8个文件).
4. 在第三个参数集中,您加载了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在其整个生命周期中只下降过一次)