现代浏览器中的非阻塞javascript和css。还需要吗？ [英] Non-blocking javascript and css in modern browsers. Is it still needed?

问题描述

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

I am playing a little with some non-blocking JavaScript loading. This means I have a small snippet of JavaScript in my head, and load all my external files at runtime. I even took it a little further to load CSS non-blocking.

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

I see the articles I could find are a little outdated, that is why I want to know if this is all still relevant.

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

Now first the scripts, they look like this:

<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 这里只是一个对象保存所有文件的所有网址。

myObject.styles is here just an object that holds all the urls for all the files.

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

I have run 3 test, here are the results:

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

This is just the normal setup, we have 4 css files in the head, and 3 js files at the bottom of the page.

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

Now I do not see anything blocking. What I see it that everything is loading at the same time.

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

Now to take this a little further, I have made ONLY the js files non-blocking. This with the script above. I suddenly see that my css files are blocking up the load. This is strange, because it is not blocking anything in the first example. Why is css suddenly blocking the load ?

< img src =https://i.stack.imgur.com/9whIu.pngalt =所有非阻塞的页面加载>

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

Finally I did a test where all the external files are loaded in a non-blocking way. Now I do not see any difference with our first method. They just both look the same.

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

My conclusion is that the files are already loaded in a non-blocking way, I do not see a need to add special script.

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

Or am I missing something here?

• 文章： http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/


• 问题： Javascript non - 阻止脚本，为什么不简单地将所有脚本放在< / 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/

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

推荐答案

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

Yes, in today's browsers, files referenced are being loaded non-blocking way. But there are differences:

• 如果你把你不需要等待的东西用于动态加载，就会出现就绪事件，如你可以从蓝色酒吧的时间看到。因此，页面中的操作可能会更快启动。


• 从页面中的文本加载的脚本（与动态加载相反）按顺序执行。因此，如果有人加载时间过长，他们必须等待对方。除非将 .async = false 放入脚本元素，否则动态加载的脚本会尽快执行。

• ready event appears sooner if you put "things that you do not need to wait for" for dynamic load, as you can see from the timing of the blue bar. So actions in the page may start sooner.
• scripts that are loaded from the text in the page (as opposed from dynamic loading) are executed in order. So they must wait for each other, if someone is loading longer. Dynamically loaded scripts, on other way, do execute as soon as possible unless put .async=false to script element.

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

So, on contemporary browsers, the difference is only semantical (static load simulates old sequential way, dynamic is much more parallel).

这篇关于现代浏览器中的非阻塞javascript和css。还需要吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！