Mar*_*aio 13 javascript nonblocking deferred-loading
为了避免javascript阻止网页呈现,我们不能只是简单地在结束</body>
标记之前加载/执行所有的JS文件/代码吗?
只有在呈现所有页面之后才会下载和执行所有JS文件和代码,因此需要像本文中建议的那样加载JS文件的非阻塞技术.他基本上建议使用如下代码:
document.getElementsByTagName("head")[0].appendChild(script);
为了在渲染网页的同时推迟脚本,从而导致网页的快速渲染速度.
但是,如果不使用这种类型的非阻塞技术(或其他类似技术),我们不会通过简单地将所有JS文件(要加载/执行)放在结束</body>
标记之前来实现相同的非阻塞结果吗?
我更惊讶,因为作者(在同一篇文章中)建议将他的代码放在结束</body>
标记之前(参见文章的"脚本放置"部分),所以他基本上是在结束</body>
标记之前加载脚本.他的代码需要什么呢?
我很困惑,任何帮助表示感谢,谢谢!
UPDATE
仅供参考,Google Analytics正在使用类似的非阻止技术来加载其跟踪代码:
<script type="text/javascript">
...
(function()
{
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'your-script-name-here.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>
Run Code Online (Sandbox Code Playgroud)
一般说不。即使脚本将在页面的所有内容之后加载,脚本的加载和执行也会阻塞页面。原因是脚本中可能存在写入命令。
但是,如果您想要实现的只是加载页面内容的速度,则将脚本标签放在</body>
标签之前的结果与动态创建脚本标签的结果相同。最显着的区别是,当您以常见的静态方式加载脚本时,它们是一一执行的,换句话说,没有并行执行脚本文件(在旧浏览器中下载脚本也是如此)。
归档时间: |
|
查看次数: |
2197 次 |
最近记录: |