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

Question

我正在玩一些非阻塞的JavaScript加载.这意味着我的JavaScript中有一小段JavaScript head,并在运行时加载所有外部文件.我甚至更进一步加载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 这里只是一个包含所有文件的所有URL的对象.

我已经运行了3次测试,结果如下:

正常设置

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

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

非阻塞JS

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

一切都是非阻塞的

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

结论

我的结论是文件已经以非阻塞方式加载,我没有看到需要添加特殊脚本.

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

更多:

• 文章:http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• 问题:Javascript非阻塞脚本,为什么不简单地将所有脚本放在</ body>标签之前？
• 问题:现代浏览器是否仍限制并行下载？
• 代码: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脚本元素。

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