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

Question

我正在玩一些非阻塞 JavaScript 加载。这意味着我的head 中有一个小的 JavaScript sn-p，并在运行时加载我的所有外部文件。我什至更进一步地加载 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

是的，在当今的浏览器中，引用的文件是以非阻塞方式加载的。但也有区别：

• 如果您将“不需要等待的东西”用于动态加载，ready 事件会更快出现，从蓝色条的时间可以看出。因此页面中的操作可能会更早开始。
• 从页面中的文本加载的脚本（与动态加载相反）按顺序执行。因此，如果有人加载时间更长，他们必须互相等待。另一方面，动态加载的脚本会尽快执行，除非将.async=false 放入脚本元素。

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

Answer 2

这取决于您要同时加载多少个文件。在您的情况下，您使用的是 3 个 JavaScript 文件。不同的浏览器有不同的限制，因此这意味着当您在 Frefox 7th 中有 7 个 JavaScript 文件时，将在 6 个完成后加载，因为 Firefox 有 6 个并行下载限制。

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