为什么把script标签放在body标签后面比较好？

Question

有两个与浏览器网页初始化相关的事件。

• DOMContentReady(document object) ：解析 HTML 文档并构建 DOM 树
• load(window object) : HTML 文档的所有元素都被渲染（显示）

根据我的理解，浏览器无法在 DOM 准备好（DOMContentReady 被触发）之前开始渲染页面，并且默认情况下脚本标签会阻止任何其他浏览器进程，直到下载并执行脚本文件。

那为什么把script标签放在body标签的最后比较好呢？在我看来，当浏览器在页面的任何位置遇到 script 标签时，浏览器都会被阻止，因此 DOMContentReady 不会被触发，直到 script 标签被下载并执行。因此，无论脚本标签的位置如何，在脚本完全处理之前，用户都看不到除了白色空白页之外的任何内容。

Answer 1

现代浏览器的工作方式是下载页面并在页面到达时处理元素和内容。当浏览器遇到脚本元素时，它将按照它们出现的顺序下载这些元素，并且在下载这些脚本之前，它将避免渲染进一步的内容，以防它们需要首先出现。这是一个阻塞操作，与例如对图像的引用。

这意味着如果您的脚本元素位于正文的开头或标题中，则您的浏览器需要在任何正文内容开始显示之前下载这些元素。您的用户可能会等待一段时间，看着空白的屏幕，想知道发生了什么，并想知道是否有任何东西在工作。 Web 用户往往只等待几秒钟（大约 10 秒）就得出网站无法加载的结论，这是合理的，因为工作网站往往加载速度也很快，而需要很长时间的网站通常无法使用。

我们使用两种工具中的一种（或两种）来解决这种情况：

• 我们将脚本元素放在正文的末尾，位于页面所有内容之后。这意味着整个页面将在可用时立即显示，然后然后将下载脚本以使一切正常工作。
• 从 HTML5 开始，我们可以将脚本标记为 async：

  <script src="..." async></script>

  。这指示浏览器在后台下载脚本，同时继续下载和渲染页面，而无需等待脚本解析后再显示内容。

根据我的理解，浏览器无法在 DOM 准备好之前开始渲染页面（...）因此，无论脚本标签的位置如何，在脚本完全处理之前，用户都看不到除了白色空白页面之外的任何内容。

事实并非如此。现代浏览器通常会显示部分加载的页面的内容，即使该页面仍在下载中，以便为用户提供可查看的内容。这意味着，如果您通过慢速连接下载一篇 10,000 字的论文，您至少可以在加载页面其余部分的同时开始阅读前几段。