DOMContentLoaded, readystatechange 等事件

April 30, 2022

document.readyState

一个文档的 readyState 可以是以下之一：

loading（正在加载）
document 仍在加载。
interactive（可交互）
文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete（完成）
文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

load

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发 load 事件。

它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

示例

在 html 中任意位置添加 <script></script>，内容如下

console.log("document.readyState=" + document.readyState); // loading

document.addEventListener("readystatechange", () => {
    // readystatechange 事件触发时，document.readyState 往往已经结束 loading 状态了
    console.log("document.readyState=" + document.readyState); // interactive / complete
});
window.addEventListener("DOMContentLoaded", () => {
    // window 和 document 都具有 DOMContentLoaded 事件，这两个事件是不同的
    console.log("window.onDOMContentLoaded");
});
document.addEventListener("DOMContentLoaded", () => {
    // document 的 DOMContentLoaded 事件先于 window 的 DOMContentLoaded 事件触发
    console.log("document.onDOMContentLoaded");
});
window.addEventListener("load", () => {
    // document 对象上没有 load 事件
    console.log("window.onload");
});

document.readyState=loading
document.readyState=interactive
document.onDOMContentLoaded
window.onDOMContentLoaded
document.readyState=complete
window.onload

事件循环

第一次宏任务在 DOMContentLoaded 事件触发之后运行

第一次微任务在 readystate 变为 loading 之后运行

例如，在上文的 <script> 最前面添加这几行（添加在最后效果相同）

setTimeout(() => console.log("timer")); // 宏任务
queueMicrotask(() => console.log("microtask")); // 微任务

输出

document.readyState=loading
microtask
document.readyState=interactive
document.onDOMContentLoaded
window.onDOMContentLoaded
timer
document.readyState=complete
window.onload

←Back to home

This work is licensed under CC BY-NC-SA 4.0