6

我有以下内容：

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

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

4

1 回答 1

12

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

  1. 这三个参数集{...},{...},{...}将按顺序执行。
  2. 在第一个参数集中，您将从谷歌的 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 和第二个 <1kb），这样您就可以在 firebug 的网络监视器选项卡中看到重叠的下载（这只是用于测试目的的人为场景，您可以使用重复的 JS 注释填充文件，只是为了制作人为的慢速文件进行测试）。

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

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

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

于 2011-12-14T04:11:52.397 回答