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

Posted 2023-02-16

【中文标题】现代浏览器中的非阻塞 javascript 和 css。还需要吗？

【英文标题】：Non-blocking javascript and css in modern browsers. Is it still needed?

【发布时间】：2012-01-02 01:57:55

【问题描述】：

我正在玩一些非阻塞 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/

【问题讨论】：

我很好奇移动浏览器上的内容。既然大部分都是webkit应该是一样的。你测试了吗？就我个人而言，我总是将脚本放在

【参考方案1】：

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

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

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

【讨论】：

啊我什至没有注意到蓝条，但确实出现得更早。让我产生疑问，因为 JS 文件似乎稍后运行。我怎么知道：我加载了一个 JS 文件，该文件从 loacalStorage 获取一些数据并将其广告到容器中。在正常设置中，所有东西都在那里，加载的东西并不明显，你看不到它正在填充。在最后一种方法中，容器在一瞬间是空的，然后它会被填满。所以方法 1 更快地触发脚本。这有意义吗？

如果您异步加载它们，它们会尽快运行。除非他们做一些实质性的工作，否则很难看出区别。它们是单线程的，很多事情在幕后发生，比如应用 css，所以你无法从一个例子中看出。

【参考方案2】：

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

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

【讨论】：

好的，我明白了。我可以做测试，但我不知道它是否相关。我认为没有人会在网站开始时加载那么多 js 或 css 文件。这就是为什么我质疑现代浏览器不再需要这种非阻塞方法的原因。如果您保持文件合理，浏览器将为您完成工作。