Javascript非阻塞脚本,为什么不简单地将所有脚本放在</ body>标签之前?

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)

bjo*_*rnd 1

一般说不。即使脚本将在页面的所有内容之后加载,脚本的加载和执行也会阻塞页面。原因是脚本中可能存在写入命令。

但是,如果您想要实现的只是加载页面内容的速度,则将脚本标签放在</body>标签之前的结果与动态创建脚本标签的结果相同。最显着的区别是,当您以常见的静态方式加载脚本时,它们是一一执行的,换句话说,没有并行执行脚本文件(在旧浏览器中下载脚本也是如此)。