为啥将脚本标签放在正文标签的末尾是好的？

Posted 2023-02-21

【中文标题】为啥将脚本标签放在正文标签的末尾是好的？

【英文标题】：Why is it good to put script tag in the end of body tag?为什么将脚本标签放在正文标签的末尾是好的？

【发布时间】：2013-06-12 23:39:36

【问题描述】：

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

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

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

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

【问题讨论】：

如果您曾经有过使用慢得痛苦的互联网的乐趣，您会经常看到部分呈现的页面。浏览器（至少 Chrome 和 Firefox）会在构建 DOM 时重新渲染页面，以使其看起来加载速度更快。

见developer.yahoo.com/blogs/ydn/…

【参考方案1】：

现代浏览器通过下载页面并在页面到达时处理元素和内容来工作。当浏览器遇到脚本元素时，它将按照它们出现的顺序下载它们，并且它将避免呈现更多内容，直到这些脚本被下载以防它们需要首先出现。这是一个阻塞操作，不像例如对图像的引用。

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

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

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

async

：<script src="..." async></script>。这会指示浏览器在后台下载脚本，同时继续下载和呈现页面，而无需在显示内容之前等待脚本解析。

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

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