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

以下所有内容都会异步加载吗？

1. jquery.min.js
2. someplugin.js
3. 另一个插件.js
4. ga.js

或者是这样的异步加载和有序加载的组合：

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

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

Answer 1

您选择了一个相当复杂的示例进行剖析。因此，让我们分步进行。

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

请记住，modernizr 是一组工具。包含的加载器实际上只是一个重新打包的 yepnope。所以你可以谷歌了解更多关于 yepnope 的信息。

顺序加载的想法是能够确保按顺序加载依赖项（例如，您的 jQuery 插件必须在 jQuery 框架之后加载）。参数集 2 中的并行下载语法的目的是提高多个不相互依赖的文件的性能（例如，一旦加载 jQuery，只要它们不相互依赖，您就可以并行加载多个 jQuery 插件） .

所以要回答你的问题，你的假设 #2 是正确的。如果您想使用 firebug 进行更多探索，请在每个参数集的完整函数中添加一些 console.log 语句。您应该看到 3 组每次都按顺序完成。现在将 firebug 切换到“Net”选项卡上，以观察文件请求的输出。 someplugin.js 和“anotherplugin.js”文件不一定每次都以相同的顺序加载。请求将按顺序发出，但时间条应该重叠（将它们显示为并行）。在本地测试它会很困难，因为它会非常快。将您的两个测试文件放在某个慢速服务器上，或者将它们与您期望的相反（使第一个文件 1mb 和第二个

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

简而言之，无论您将它们放在什么顺序，这就是我们的顺序 执行它们。执行“load”和“both”文件集 在您设置“是”或“否”之后，但您指定的顺序 在这些集合中也被保留。这并不意味着文件 始终按此顺序加载，但我们保证它们按此执行 命令。由于这是一个异步加载器，我们将所有内容加载到 同时，我们只是延迟运行它（或注入它）直到 时机刚刚好。

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