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 () { //代码主体 }); }