document.readyState

只读属性，返回document的加载状态。有三个可能的值

• loading  仍在加载
• interactive  文档加载完成，解析完成，但图片、样式表等外部资源可能仍在加载。DOMContentLoaded即将发生
• complete  文档与所有子资源都完成加载。load事件即将触发

加载顺序

document.readystate = 'loading'

document.readystate变成interactive

DOMContentLoaded事件触发

document.readystate变成complete

load事件触发

可通过readystatechange事件监听document加载状态

document.addEventListener('readystatechange', () => console.log(document.readyState));

带async的脚本在加载完后会立即执行，如果想要保证它在DOMContentLoaded之后执行，可能最开始会想到在脚本中用这种写法：

document.addEventListener('DOMContentLoaded', () => {
    //代码主体
})

但是异步脚本也可能会在DOMContentLoaded事件结束后也就是readystate为complete阶段才下载完，此时添加的DOMContentLoaded事件已经不会触发，所以此脚本将不再执行。

readystate可以用于解决这种问题，代码如下

if (document.readyState != 'loading') {
    //代码主体
} else {
    window.addEventListener("DOMContentLoaded", function () {
        //代码主体
    });
}