我正在玩一些非阻塞 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/
最佳答案
是的,在当今的浏览器中,引用的文件正在以非阻塞方式加载。但也有区别:
- 如果您将“不需要等待的事情”设置为动态加载,则就绪事件会更快出现,从蓝色条的时间可以看出。因此页面中的操作可能会更快开始。
- 从页面文本加载的脚本(与动态加载相反)是按顺序执行的。因此,如果有人加载时间更长,他们必须互相等待。另一方面,动态加载的脚本会尽快执行,除非将
.async=false
放入脚本元素。
因此,在当代浏览器上,区别只是语义上的(静态加载模拟旧的顺序方式,动态加载更加并行)。
关于javascript - 现代浏览器中的非阻塞 javascript 和 css。还需要吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8197072/