[JavaScript知识库]HTML 页面的生命周期、HTML 事件

From：https://blog.csdn.net/WuLex/article/details/101016936

1、页面生命周期

HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途

• DOMContentLoaded?： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是?<img> 和 样式表 等外部资源可能并没有下载完毕。
• load ：?浏览器已经加载了所有的资源（ 图像，样式表等 ）。可以在此事件触发时获得图像的大小（ 如果没有被在 HTML/CSS 中指定 ）
• beforeunload / unload ：?当用户离开页面的时候触发。(?可以询问用户是否保存了更改以及是否确定要离开页面。 )

1.1 DOMContentLoaded

DOMContentLoaded?由?document?对象触发。可以使用?addEventListener?来监听它：

document.addEventListener("DOMContentLoaded", ready);

举个例子

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

在这个例子中?DOMContentLoaded 在 document 加载完成后就被触发，无需等待其他资源的载入，所以 alert 输出的图像的大小为 0。这么看来 DOMContentLoaded?似乎很简单，DOM 树构建完毕之后就运行该事件，不过其实存在一些陷阱。就是一些 <img> 和 样式表 等外部资源可能并没有下载完毕。

DOMContentLoaded?和 Javascript

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

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

script 中 defer 与 async 的异同

• 共同点：两者都告诉浏览器可以继续处理页面，并在“后台”加载脚本，然后在加载时运行脚本。因此脚本不会阻止DOM构建和页面呈现。
• 不同点：如果一个页面中有多个带有defer修饰符的script标签，它们会按照顺序进行加载并且在DOMContentLoaded之前执行；async修饰符则不会遵循顺序，它什么时候加载完成什么时候执行(有可能在DOMContentLoaded之前，也有可能在DOMContentLoaded之后)。
• 使用场景：defer一般用在脚本相互依赖性的时候，能保证执行顺序；而async比较适用于完全独立的脚本。

不过有两个例外是带 async 和 defer 的外部脚本，他们告诉浏览器继续解析而不需要等待脚本的执行，所以用户可以在脚本加载完成前可以看到页面，有较好的用户体验。async 和 defer 属性仅仅对外部脚本起作用，并且他们在 src 不存在时会被自动忽略。它们都告诉浏览器继续处理页面上的内容同时在后台加载脚本，当脚本加载完毕后再执行。所以脚本不会阻塞DOM树的构建和页面的渲染。(?译注：其实这里是不对的，带有 async 和 defer 的脚本的下载是和 HTML 的下载与解析是异步的，但是 js 的执行一定是和 UI线程 是互斥的，像下面这张图所示，async 在下载完毕后的执行会阻塞 HTML 的解析 )

?他们有两处不同：

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

DOMContentLoaded?与 CSS(样式表)

外部样式表并不会影响 DOM，所以 DOMContentLoaded 并不会被他们阻塞。

不过仍然有一个陷阱：如果在样式后面有一个内联脚本，那么脚本必须等待样式先加载完。

(?译注：简单来说，JS 因为有可能会去获取?DOM?的样式，所以 JS 会等待样式表加载完毕，而 JS 是阻塞?DOM?的解析的，所以在有外部样式表的时候，JS 会一直阻塞到外部样式表下载完毕 )

<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事件。

defer?是会阻塞?DOMContentLoaded?的，被?defer?的脚本要在DOMContentLoaded?触发前执行，所以如果HTML很快就加载完了（先不考虑?CSS?阻塞?DOMContentLoaded?的情况），而?defer?的脚本还没有加载完，浏览器就会等，等到脚本加载完，执行完，再触发?DOMContentLoaded，放上一张图（取自在?devTool?下分析自己写的一个页面）

HTML很快就加载和解析完毕（CSS?在这里是动态加载的，不阻塞?DOMContentLoaded），jQuery?和main.js?的脚本是?defer?的，?DOMContentLoaded（蓝线）一直在等，等到这两个脚本下载完并执行完，才触发了?DOMContentLoaded。从这个角度看来，defer?和把脚本放在?</body>?前真是没啥区别，只不过?defer?脚本位 于head?中，更早被读到，加载更早，而且不担心会被其他的脚本推迟下载开始的时间。

document.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 的在各个事件中的执行顺序又是如何呢？

<script>
  function log(text) { /* output the time and message */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

输出如下:

    [1] initial readyState:loading
    [2] readyState:interactive
    [2] DOMContentLoaded
    [3] iframe onload
    [4] readyState:complete
    [4] img onload
    [4] window onload

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

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

1.2 window.onload

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

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

<script>
  window.onload = function() {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.3 onbeforeunload / onunload

window.onunload

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

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

window.onbeforeunload

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

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

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

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

1.4 示例：

示例代码：

?

?执行顺序
? ? 1.alert(“outside.”);
? ? 2.alert(“inline.”);
? ? 3.alert(getComputedStyle(document.body).width);
? ? 4.alert(“defer.”);
? ? 5.readyState:interactive；
? ? 6.alert(“DOM ready!”);
? ? 7.readyState:interactive；
? ? 8.alert(“load!”);
? ? 9.alert(“beforeunload!”);
? ? 10.alert(“unload!”);
*** alert(“async”)在什么时候执行？
有可能在alert(“defer.”)之前或之后，也有可能在alert(“DOM ready!”)之前或之后。

动态加载 script

动态 script 的默认行为是 async

• 1.异步，不会阻塞渲染；
• 2.先加载完成，先运行。

在 DOMContentLoaded 中访问 img 属性

*** DOMContentLoaded不会等待img加载完成，建议不要在DOMContentLoaded中访问img的相关属性。

外部样式是否会阻塞 DOMContentLoaded 的执行？

• 1. 一般情况，外部样式不会阻塞 DOMContentLoaded的执行；
• 2. 如果外部样式表后有script脚本访问样式属性，则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行)，从而会阻塞DOMContentLoaded的执行。

readyState

如果我们在加载文档之后监听DOMContentLoaded，它永远不会执行；在需要的时候，我们可以监听readystatechange事件，通过document.readyState来获得文档的当前状态。

document.readyState三态：

• loading ： 文档正在加载中
• interactive ： 文档已经准备完全好
• complete ： 文档和所有资源加载完成

?*** document.readyState:interactive与DOMContentLoaded相同；document.readyState:complete与window.onload相同。

1.5?总结

页面事件的生命周期：

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

html 常见的生命周期钩子

window.addEventListener('resize', function() {
    console.log('获取或设置当前窗口的resize事件的事件处理函数')
})

window.addEventListener('pageshow', function (e) {
    console.log('当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)')
    if (e.persisted) 
        console.log('网页来自缓存.')
})

document.onreadystatechange = function() {
    if (document.readyState == "loading")
        console.log('浏览器正在加载和处理此文档')
    if (document.readyState == "interactive")
        console.log('文档已被解析，但浏览器还在加载其中的链接资源(图像和媒体文件等)')
    if (document.readyState == "complete")
        console.log('文档已被解析，所有的资源也加载完毕')
}

document.addEventListener('DOMContentLoaded', function() {
    console.log('当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。')
})

window.addEventListener('load', function() {
    console.log('当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。')
})

3、HTML 事件参考手册

：https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

全局事件属性

HTML 有能力让事件触发浏览器中的动作，例如当用户单击元素时启动 JavaScript。

如需了解有关编程事件的更多信息，请访问?JavaScript 教程。

以下是可添加到 HTML 元素以定义事件操作的全局事件属性。

Window 事件属性

针对 window 对象触发的事件（应用到 <body> 标签）：

Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

Keyboard 事件

Mouse 事件

由鼠标或类似用户动作触发的事件：

Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

4、HTML DOM 事件

：https://www.w3school.com.cn/jsref/dom_obj_event.asp

HTML DOM 事件

HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。

事件通常与函数结合使用，在事件发生之前函数不会被执行（例如当用户单击按钮时）。

如需有关事件的教程，请学习?JavaScript 事件教程。

HTML DOM 事件属性和方法