页面生命周期：DOMContentLoaded, load, beforeunload, unload

客官°小女子只卖身不卖艺 2022-04-13 05:40 220阅读 0赞

# 页面生命周期：DOMContentLoaded, load, beforeunload, unload #

原文地址：[http://javascript.info/onload...][http_javascript.info_onload...]

HTML页面的生命周期有以下三个重要事件：

*  `DOMContentLoaded` — 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 `<img>` 和样式表等外部资源可能并没有下载完毕。
 *  `load` — 浏览器已经加载了所有的资源（图像，样式表等）。
 *  `beforeunload/unload` \-- 当用户离开页面的时候触发。

每个事件都有特定的用途

*  `DOMContentLoaded` \-- DOM加载完毕，所以js可以访问所有DOM节点，初始化界面。
 *  `load` \-- 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）
 *  `beforeunload/unload` \-- 用户正在离开页面：可以询问用户是否保存了更改以及是否确定要离开页面。

来看一下每个事件的细节。

## DOMContentLoaded ##

`DOMContentLoaded` 由 `document` 对象触发。

我们使用 `addEventListener` 来监听它：

document.addEventListener("DOMContentLoaded", ready);

举个例子

在这个例子中 `DOMContentLoaded`在document加载完成后就被触发，无需等待其他资源的载入，所以`alert`输出的图像的大小为0。

这么看来`DOMContentLoaded` 似乎很简单，DOM树构建完毕之后就运行该事件，不过其实存在一些陷阱。

### DOMContentLoaded 和脚本 ###

当浏览器在解析HTML页面时遇到了 `<script>...</script>` 标签，将无法继续构建DOM树（译注：UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起），必须立即执行脚本。所以 `DOMContentLoaded` 有可能在所有脚本执行完毕后触发。

外部脚本（带`src`的）的加载和解析也会暂停DOM树构建，所以 `DOMContentLoaded` 也会等待外部脚本。

不过有两个例外是带`async`和`defer`的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验。

`async`和`defer`属性仅仅对外部脚本起作用，并且他们在`src`不存在时会被自动忽略。

它们都告诉浏览器继续处理页面上的内容，而在后台加载脚本，然后在脚本加载完毕后再执行。所以脚本不会阻塞DOM树的构建和页面的渲染。

**（译注：其实这里是不对的，带有`async`和`defer`的脚本的下载是和HTML的下载与解析是异步的，但是js的执行一定是和UI线程是互斥的，像下面这张图所示，`async`在下载完毕后的执行会阻塞HTML的解析）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZmVpNTEy_size_16_color_FFFFFF_t_70][]

他们有两处不同：

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th><code>async</code></th> 
   <th><code>defer</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>顺序</td> 
   <td>带有<code>async</code>的脚本是优先执行先加载完的脚本，他们在页面中的顺序并不影响他们执行的顺序。</td> 
   <td>带有<code>defer</code>的脚本按照他们在页面中出现的顺序依次执行。</td> 
  </tr> 
  <tr> 
   <td><code>DOMContentLoaded</code></td> 
   <td>带有<code>async</code>的脚本也许会在页面没有完全下载完之前就加载，这种情况会在脚本很小或本缓存，并且页面很大的情况下发生。</td> 
   <td>带有<code>defer</code>的脚本会在页面加载和解析完毕后执行，刚好在 <code>DOMContentLoaded</code><strong>之前</strong>执行。</td> 
  </tr> 
 </tbody> 
</table>

所以`async`用在那些完全不依赖其他脚本的脚本上。

### DOMContentLoaded and styles
    
    External style sheets don't affect DOM, and so `DOMContentLoaded` does not wait for them.
    外部样式表并不会影响DOM，所以`DOMContentLoaded`并不会被他们阻塞。
    But there's a pitfall: if we have a script after the style, then that script must wait for the stylesheet to execute:
    不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。
    
    <link type="text/css" rel="stylesheet" href="style.css">
    <script>
      // the script doesn't not execute until the stylesheet is loaded
      // 脚本直到样式表加载完毕后才会执行。
      alert(getComputedStyle(document.body).marginTop);
    </script>

发生这种事的原因是脚本也许会像上面的例子中所示，去得到一些元素的坐标或者基于样式的属性。所以他们自然要等到样式加载完毕才可以执行。

`DOMContentLoaded`需要等待脚本的执行，脚本又需要等待样式的加载。

### 浏览器的自动补全 ###

Firefox, Chrome和Opera会在`DOMContentLoaded`执行时自动补全表单。

例如，如果页面有登录的界面，浏览器记住了该页面的用户名和密码，那么在 `DOMContentLoaded`运行的时候浏览器会试图自动补全表单（如果用户设置允许）。

所以如果`DOMContentLoaded`被一个需要长时间执行的脚本阻塞，那么自动补全也会等待。你也许见过某些网站（如果你的浏览器开启了自动补全）—— 浏览器并不会立刻补全登录项，而是等到整个页面加载完毕后才填充。这就是因为在等待`DOMContentLoaded`事件。

使用带`async`和`defer`的脚本的一个好处就是，他们不会阻塞`DOMContentLoaded`和浏览器自动补全。（译注：其实执行还是会阻塞的）

## window.onload ##

`window`对象上的`onload`事件在所有文件包括样式表，图片和其他资源下载完毕后触发。

下面的例子正确检测了图片的大小，因为`window.onload`会等待所有图片的加载。

## window.onunload ##

用户离开页面的时候，`window`对象上的`unload`事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上。

所以我们需要使用另一个事件 — `onbeforeunload`。

## window.onbeforeunload ##

如果用户即将离开页面或者关闭窗口时，`beforeunload`事件将会被触发以进行额外的确认。

浏览器将显示返回的字符串，举个例子：

window.onbeforeunload = function() {
      return "There are unsaved changes. Leave now?";
    };

有些浏览器像Chrome和火狐会忽略返回的字符串取而代之显示浏览器自身的文本，这是为了安全考虑，来保证用户不受到错误信息的误导。

## readyState ##

如果我们在整个页面加载完毕后设置`DOMContentLoaded`会发生什么呢？

啥也没有，`DOMContentLoaded`不会被触发。

有一些情况我们无法确定页面上是否已经加载完毕，比如一个带有`async`的外部脚本的加载和执行是异步的（注：执行并不是异步的-\_-）。在不同的网络状况下，脚本有可能是在页面加载完毕后执行也有可能是在页面加载完毕前执行，我们无法确定。所以我们需要知道页面加载的状况。

`document.readyState`属性给了我们加载的信息，有三个可能的值：

*  `loading` 加载 - document仍在加载。
 *  `interactive` 互动 - 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
 *  `complete` \- 文档和所有子资源已完成加载。状态表示 `load` 事件即将被触发。

所以我们可以检查 `document.readyState` 的状态，如果没有就绪可以选择挂载事件，如果已经就绪了就可以直接立即执行。

像这样：

function work() { /*...*/ }
    
    if (document.readyState == 'loading') {
      document.addEventListener('DOMContentLoaded', work);
    } else {
      work();
    }

每当文档的加载状态改变的时候就有一个`readystatechange`事件被触发，所以我们可以打印所有的状态。

// current state
    console.log(document.readyState);
    
    // print state changes
    document.addEventListener('readystatechange', () => console.log(document.readyState));

`readystatechange` 是追踪页面加载的一个可选的方法，很早之前就已经出现了。不过现在很少被使用了，为了保持完整性还是介绍一下它。

`readystatechange`的在各个事件中的执行顺序又是如何呢？

输出如下:

1.  \[1\] initial readyState:loading
2.  \[2\] readyState:interactive
3.  \[2\] DOMContentLoaded
4.  \[3\] iframe onload
5.  \[4\] readyState:complete
6.  \[4\] img onload
7.  \[4\] window onload

方括号中的数字表示他们发生的时间，真实的发生时间会更晚一点，不过相同数字的时间可以认为是在同一时刻被按顺序触发（误差在几毫秒之内）

*  `document.readyState` 在 `DOMContentLoaded`前一刻变为`interactive`，这两个事件可以认为是同时发生。
 *  `document.readyState` 在所有资源加载完毕后（包括`iframe`和`img`）变成`complete`，我们可以看到`complete`、 `img.onload`和`window.onload`几乎同时发生，区别就是`window.onload`在所有其他的`load`事件之后执行。

## 总结 ##

页面事件的生命周期：

*  `DOMContentLoaded`事件在DOM树构建完毕后被触发，我们可以在这个阶段使用js去访问元素。
    
     *  `async`和`defer`的脚本可能还没有执行。
     *  图片及其他资源文件可能还在下载中。
 *  `load`事件在页面所有资源被加载完毕后触发，通常我们不会用到这个事件，因为我们不需要等那么久。
 *  `beforeunload`在用户即将离开页面时触发，它返回一个字符串，浏览器会向用户展示并询问这个字符串以确定是否离开。
 *  `unload`在用户已经离开时触发，我们在这个阶段仅可以做一些没有延迟的操作，由于种种限制，很少被使用。
 *  `document.readyState`表征页面的加载状态，可以在`readystatechange`中追踪页面的变化状态：
    
     *  `loading` — 页面正在加载中。
     *  `interactive` \-- 页面解析完毕，时间上和 `DOMContentLoaded`同时发生，不过顺序在它之前。
     *  `complete` \-- 页面上的资源都已加载完毕，时间上和`window.onload`同时发生，不过顺序在他之前。

[http_javascript.info_onload...]: http://javascript.info/onload-ondomcontentloaded
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZmVpNTEy_size_16_color_FFFFFF_t_70]: /images/20220413/31dd10ac53c843539a494bbbd4759ecc.png