javascript - 为什么内联脚本在页面底部时会阻塞渲染？

我读了《高性能网站：前端工程师的必备知识》，书中作者建议所有的 JavaScript 代码都应该外部化，并放在页面底部，而不是放在 head 中。

这在这个例子中得到了说明。外部脚本标签会阻塞页面的下载和渐进式渲染，所以解决方法是将其放在页面的底部。

然而，在他的第二本书《更快的网站：Web开发者的性能最佳实践》中，他谈到了内联JavaScript标签。

内联脚本也会阻止页面的下载和渲染，所以他建议将它们也移到页面底部。然而，正如这个例子所示，这种做法仍然会完全阻止页面的渲染

为什么将外部移动脚本放到页面底部可以让页面逐步渲染，而将内联脚本移动则会完全阻塞渲染，直到脚本执行完成？

附言：

问题不在于为什么将 JavaScript 放在页面底部而不是放在 head 中。问题在于为什么底部的内联脚本会阻塞渲染，而底部的外部脚本不会。

答案＃1

在内联脚本中，时间被用来运行脚本，这可能会改变 DOM。在 DOM 正在变化时尝试渲染 DOM 是制造混乱的做法。因此，渲染只在 JS 暂停时进行，因此 DOM 是稳定的。

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