现代浏览器中的非阻塞javascript和css。还需要吗？

Question

我正在玩一些非阻塞的JavaScript加载。这意味着我在head中有一小段JavaScript，并在运行时加载所有外部文件。我甚至进一步加载了CSS非阻塞。

我看到我能找到的文章有点过时，这就是为什么我想知道这一切是否仍然相关。

现在首先是脚本，它们看起来像这样：

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles这里只是一个包含所有文件的所有网址的对象。

我已经运行了3次测试，结果如下：

正常设置

这只是正常设置，我们头部有4个css文件，页面底部有3个js文件。

现在我没有看到任何阻塞。我认为一切都在同时加载。

非阻塞JS

现在更进一步，我只做了非阻塞的js文件。这与上面的脚本。我突然发现我的css文件阻塞了负载。这很奇怪，因为在第一个例子中它没有阻塞任何东西。 为什么css会突然阻止负载？

一切非阻塞

最后，我做了一个测试，其中所有外部文件都以非阻塞方式加载。现在我认为我们的第一种方法没有任何区别。它们看起来都一样。

结论

我的结论是文件已经以非阻塞方式加载，我看不出需要添加特殊脚本。

或者我在这里遗漏了什么？

更多：

• 文章：http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• 问题：Javascript non-blocking scripts, why don't simply put all scripts before </body> tag?
• 问题：Do modern browsers still limit parallel downloads?
• 代码：http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• 代码：http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Answer 1

是的，在今天的浏览器中，引用的文件是以非阻塞方式加载的。但存在差异：

如果你把“你不需要等待的东西”用于动态加载，
• 就绪事件会更快出现，正如你可以从蓝条的时间看到的那样。因此，页面中的操作可能会更快开始。
• 从页面中的文本加载的脚本（与动态加载相反）按顺序执行。因此，如果有人加载时间过长，他们必须等待对方。除非将.async=false放到脚本元素中，否则动态加载的脚本会尽快执行。

因此，在当代浏览器中，差异只是语义上的（静态负载模拟旧的顺序方式，动态更加平行）。

Answer 2

这取决于您想要同时加载多少个文件。在您的情况下，您使用3个JavaScript文件。不同的浏览器有不同的限制，所以这意味着你有例如7个JavaScript文件将在6个完成后加载，因为Firefox已经限制了6个并行下载。

在标记之前使用脚本或加载scitps仍然是很好的方法。尝试使用更多的JavaScript文件重复测试，例如10个左右。