javascript - 现代浏览器中的非阻塞 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 在这里只是一个包含所有文件的所有 url 的对象。

我已经运行了 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 放入脚本元素。

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