7

There are two events related to web page initialization of browser.

  • DOMContentReady(document object) : HTML document was parsed and DOM tree was constructed
  • load(window object) : All element of HTML document were rendered(displayed)

In my understanding, browser can't start rendering page before DOM is ready(DOMContentReady is fired) and by default script tag blocks any other browser process until script file is downloaded and executed.

Then why is it good to put script tag in the end of body tag? In my opinion, browser will be blocked when it meets script tag in any position of the page, so DOMContentReady will not be fired until script tag is downloaded and executed. As a result, user can't see anything except white blank page until script is fully processed regardless of position of script tag.

4

1 回答 1

8

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

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

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

  • 我们将脚本元素放在正文的末尾，在所有页面内容之后。这意味着整个页面将在可用时立即显示，然后脚本将下载以使事情正常进行。
  • 从 HTML5 开始，我们可以将脚本标记为async : <script src="..." async></script>。这指示浏览器在后台下载脚本，同时继续下载和呈现页面，而不是在显示内容之前等待脚本解析。

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

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

于 2013-06-17T04:28:59.313 回答