为什么内联脚本在放在页面底部时会阻止渲染？

Question

我阅读了High Performance Web Sites: Essential Knowledge for Front-End Engineers，其中作者建议所有JavaScript代码都应该外部化并放在页面底部而不是放在头脑中。

this example中说明了这一点。 外部脚本标记会阻止页面的下载和渐进式呈现，因此解决方案是将其放在页面底部。< / p>

然而，在他的第二本书Even Faster Web Sites: Performance Best Practices for Web Developers中，他谈到了内联 JavaScript代码。

内联脚本还阻止下载和呈现页面，因此他建议将它们也移动到页面底部。但是，此操作仍然完全阻止了页面的呈现，如this example

中所示

为什么将外部脚本移动到页面底部会让页面逐步呈现，同时移动内联脚本会完全阻止呈现，直到执行脚本为止？

---

PS：

问题不在于为什么要将JavaScript添加到页面底部而不是将它们放在头脑中。这就是为什么底部内联脚本阻止渲染而底部外部脚本没有阻止渲染的原因。

Answer 1

在内联脚本中，运行脚本需要时间，这可能会更改DOM。尝试在变异时渲染DOM是一个混乱的秘诀。因此渲染只发生在JS停滞时的点，因此DOM是稳定的。

在等待外部脚本下载时，脚本的运行会停止，因此可以安全地呈现DOM。在渲染完成之前，下载的JS将不会运行。