且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Modernizr-哪些脚本异步加载?

更新时间:2023-12-05 09:00:28

您已经选择了一个相当复杂的示例进行剖析.因此,让我们分步进行吧.

You've selected a fairly complex example to dissect. So lets do it in steps.

  1. 三个参数集{...},{...},{...}将顺序执行.
  2. 在第一个参数集中,您将从Google的CDN加载jQuery,然后在完成后测试是否实际加载了jQuery.如果不是(也许您正在离线开发并且无法访问google CDN),则加载jQuery的本地副本.因此,这些是顺序的",但实际上只有其中之一会加载.
  3. 在第二个参数集中,同时并异步加载someplugin.js和'anotherplugin.js`.因此,它们将并行下载.一次可以并行处理2个项目非常好,因为这是当今浏览器的最薄弱的链接"(仅IE,其他浏览器一次并行处理6-8个文件).
  4. 在第三个参数集中,您加载了Google Analytics(分析)脚本.
  1. The three parameter sets {...},{...},{...} will execute sequentially.
  2. Inside the first parameter set you will load jQuery from google's CDN, then when complete you test if jQuery actually loaded. If not (perhaps you are developing offline and the google CDN is not reachable), you load a local copy of jQuery. So these one is "sequential", but really only one of them will load.
  3. In the second parameter set you load someplugin.js and 'anotherplugin.js` simultaneously and asynchronously. So they will be downloaded in parallel. Its great when you can parallel 2 items at a time as that is the "weakest link" for browsers today (yup only IE, Every other browser will parallel 6-8 files at a time).
  4. In the third parameter set you load the google analytics script.

记住modernizr是工具的集合.包含的加载程序实际上只是重新打包的 yepnope .因此,您可以在Google上搜索有关yepnope的更多信息.

Remember modernizr is a collection of tools. The included loader is actually just a repackaged yepnope. So you can google for more about yepnope.

顺序加载的想法是确保顺序加载依赖项(例如,您的jQuery插件必须在jQuery框架之后加载).参数集2中并行下载语法的目的是为了提高不相互依赖的多个文件的性能(例如,只要加载jQuery,只要它们彼此不依赖,您就可以并行加载多个jQuery插件)

The idea with the sequential loads is to be able to ensure that dependencies load in order (example your jQuery plugins must load after jQuery framework). The purpose of the parallel downloads syntax in parameter set two is to speed up performance for multiple files that are not co-dependent (example you could load multiple jQuery plugins in parallel once jQuery is loaded as long as they don't depend on eachother).

因此,回答您的问题,您的假设2是正确的.如果您想使用Firebug进行更多探索,请在每个参数集的完整函数中添加一些console.log语句.您应该每次都看到3个组依次完成.现在将firebug切换到"Net"选项卡上,以查看文件请求是否消失.文件someplugin.js和'anotherplugin.js`不一定每次都以相同的顺序加载.请求将按顺序发出,但是时间栏应该重叠(将它们显示为并行).在本地对其进行测试将非常困难,因为它是如此之快.将您的两个测试文件放在速度较慢的服务器上,或者将它们放置在与预期相反的位置(将第一个文件设为1mb,将第二个文件设为< 1kb),以便您可以在firebug的网络监视器标签中看到重叠的下载内容(这是只是出于测试目的的人工场景,您可以使用重复的JS注释填充文件,只是为了制造人为的慢速文件进行测试.

So to answer your question, your hypothesis #2 is correct. If you'd like to explore more using firebug, add some console.log statements in each parameter set's complete function. You should see the 3 groups complete sequentially every time. Now switch firebug onto the "Net" tab to watch the file requests go out. The files someplugin.js and 'anotherplugin.js` won't necessarily load in the same order everytime. The requests will go out in order, but there timing bars should overlap (showing them as parallel). Testing this locally will be hard because it'll be so fast. Put your two test files on a slow server somewhere or bias them the opposite of what you are expecting (make the first file 1mb and the second <1kb) so you can see the overlapping downloads in the network monitor tab of firebug (this is just an artificial scenario for testing purposes, you could fill a file with repeated JS comments just to make an artificially slow file for testing).

编辑:为了更准确地阐明 ,我想在 yepnopejs.com 主页. yepnopejs是modernizr中包含(和别名)的资源加载器:

To clarify a little more accurately, I'd like to add a quote from the yepnopejs.com homepage. yepnopejs is the resource loader that is included (and aliased) inside modernizr:

简而言之,无论您输入的顺序如何,这就是我们 执行它们.执行加载"和两组"文件集 在设置是"或否"之后,但是您指定的顺序 这些集合中的内容也将保留.这并不意味着文件 始终按此顺序加载,但我们保证它们按此顺序执行 命令.由于这是一个异步加载程序,因此我们可以在所有位置加载所有内容 在同一时间,我们只是延迟运行(或注入),直到 时间恰到好处.

In short, whatever order you put them in, that's the order that we execute them in. The 'load' and 'both' sets of files are executed after your 'yep' or 'nope' sets, but the order that you specificy within those sets is also preserved. This doesn't mean that the files always load in this order, but we guarantee that they execute in this order. Since this is an asynchronous loader, we load everything all at the same time, and we just delay running it (or injecting it) until the time is just right.

所以,可以的,您可以在同一Modernizr.load语句中放置jquery和一些插件,然后将它们并行下载并按照参数中指定的顺序注入到DOM中.您在这里放弃的唯一事情就是能够测试jQuery是否成功加载,并且在必要时可以获取jQuery的非CDN版本的备份.因此,您可以选择对您有多重要的后备支持. (我没有任何消息来源,但我似乎还记得Google CDN在其整个生命周期中仅下降了一次)

So yes, you could put jquery, followed by some plugins in the same Modernizr.load statement and they will be downloaded in parallel and injected into the DOM in the same order as specified in the arguments. The only thing you are giving up here is the ability to test if jQuery loaded successfully and perhaps grab a backup non-CDN version of jQuery if necessary. So it's your choice how critical fallback support is for you. (I don't have any sources, but I seem to recall that the google CDN has only gone down once in its entire lifetime)