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

我读了这篇文章，作者建议所有JavaScript代码都应该外部化，并放在页面底部，而不是放在头部

这在中进行了说明。external脚本标记同时阻止了页面的下载和渐进呈现，因此解决方案是将其放在页面底部

然而，在他的第二本书中，他谈到了内联JavaScript标记

内联脚本还会阻止页面的下载和呈现，因此他建议将它们也移动到页面底部。但是，这仍然会完全阻止页面的呈现，如中所示

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

---

附言：

---

问题不在于为什么要将JavaScript添加到页面底部，而不是放在页面头部。这是关于为什么底部内联脚本会阻止渲染，而底部外部脚本不会。在内联脚本中，运行脚本会占用时间，这可能会更改DOM。试图在DOM发生变异时渲染它会导致混乱。因此，渲染只在JS停止时发生，因此DOM是稳定的

---

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

很有趣，因此如果我有一个外部脚本，后面跟着一个内联脚本，并且两者都放在正文的底部，那么内联脚本将等待外部脚本被下载并首先执行。这样，直到两个脚本都执行完毕，页面才会呈现，对吗？否。浏览器可能会在暂停等待外部脚本下载时呈现DOM。此时，它甚至（逻辑上）不会意识到标记中存在内联脚本，因为解析器还没有到达它。请注意，外部脚本可能包含一个

document.write（）

调用，该调用可能会阻止内联脚本被解释为脚本。我测试了您所说的，这是真的，但以防外部文件未被缓存。我第一次打开页面时，页面已呈现，没有等待内联脚本，但在后续请求中，外部文件已被缓存，因此呈现将暂停，直到内联脚本完成。顺便说一句，我使用的是一个定制的内联脚本，需要6分钟才能完成测试。我很确定，如果你动态地向页面添加脚本标记，IE（而不是chrome）会异步执行，这显然与你在head标记中加载脚本标记时的行为相反。