Modernizr - 哪些脚本异步加载?

问题描述:

我有以下几点:Modernizr - 哪些脚本异步加载?

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加载

我有一个很难测试它是如此。

你已经选择了一个相当复杂的例子来解剖。所以让我们一步一步来做。

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

请记住modernizr是一个工具集合。包括的装载机实际上只是一个重新包装的yepnope。所以你可以谷歌更多关于yepnope。

连续加载的想法是能够确保依赖加载顺序(例如,您的jQuery插件必须在jQuery框架之后加载)。在参数集2中使用并行下载语法的目的是为了加速多个不相互依赖的文件的性能(例如,一旦jQuery被加载,只要不依赖彼此就可以并行加载多个jQuery插件) 。

所以要回答你的问题,你的假设#2是正确的。如果您想使用萤火虫探索更多,请在每个参数集的完整功能中添加一些console.log语句。您应该每次看到3组按顺序完成。现在将firebug切换到“网络”选项卡上,观看文件请求。文件someplugin.js和'另一个插件。js`不一定每次都以相同的顺序加载。这些请求将按顺序排列,但时序条应重叠(显示为并行)。在本地进行测试将会很困难,因为它会很快。把你的两个测试文件放在某个缓慢的服务器上,或者让它们与你所期望的相反(使第一个文件为1mb,第二个文件为< 1kb),这样你就可以在firebug的网络监视器标签中看到重叠的下载一个用于测试目的的人工场景,你可以用一个重复的JS注释来填充一个文件,只是为了制作一个人为的缓慢文件来测试)。

编辑:一点更准确地澄清,我想从yepnopejs.com首页加入报价。 yepnopejs是包括(与化名)内Modernizr的资源加载器:

总之,你把一切为了他们,那是为了大家 在执行他们的“负荷”和“两个”套。的文件在'yep'或'nope'设置后执行 ,但您在这些集合中指定的订单也会保留下来 。这并不意味着文件 总是按此顺序加载,但我们保证它们以此 的顺序执行。由于这是一个异步装载程序,我们同时在 处加载所有内容,并且我们只是延迟运行它(或注入它)直到 时间恰到好处。

所以是的,你可以把jquery放在同一个Modernizr.load声明中的一些插件中,它们将被并行下载并按照参数中指定的顺序注入到DOM中。你在这里放弃的唯一的事情是能够测试jQuery是否成功加载,并且如果需要的话可以获取非CDN的备份版本。所以这是您的选择,关键的后备支持对您来说是多么的重要。 (我没有任何消息来源,但我似乎记得谷歌CDN在其整个生命周期中只降了一次)

+0

感谢您的详细解释。是不是同时加载jQuery +多个jQuery插件是一个问题?或者,jQuery需要首先自行加载吗? – 2011-12-19 15:58:30