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

Question

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

这在 this example 中有说明。 . external script 标签会阻止页面的下载和渐进式呈现，因此解决方案是将其放在页面底部。

然而，在他的第二本书中Even Faster Web Sites: Performance Best Practices for Web Developers他谈到了 Inline JavaScript 标签。

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

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

---

附言:

问题不在于为什么将 JavaScript 添加到页面底部而不是将它们放在头部。这就是为什么底部内联脚本会阻止渲染而底部外部脚本不会。

Answer 1

在内联脚本中，运行脚本会占用时间，这可能会更改 DOM。尝试在 DOM 发生变化时渲染它会导致一团糟。所以渲染只发生在 JS 停止的时候，因此 DOM 是稳定的。

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