在写JavaScript代码时，我们都会把代码包裹在document的DOMContentLoaded事件回调中，以保证代码中使用的元素都已经存在了。

同时在前端面试中，DOMContentLoaded事件和load事件之间的区别也是经常被提及的问题。

实际上，页面加载过程中，除了DOMContentLoaded事件和load事件，还有一个属性document.readyState表示页面不同的加载状态。

document.readyState一共有3个值，分别表示页面加载过程中的3个状态

loading：表示页面还在加载和解析。对应的是DOMContentLoaded事件触发之前的状态
interactive：表示页面已经完成加载和解析，已经可以使用JavaScript和页面进行交互了，但是页面中的其他资源还在加载。对应是的DOMContentLoaded事件触发之后和load事件触发之前的状态。
complete：表示页面中所有资源都已经加载完毕。对应的即将触发load事件及load事件触发之后的状态。

除了这3个状态外，还有一个readystatechange事件，在readyState属性变化时触发。

可以看出，readyState属性和readystatechange事件可以比DOMContentLoaded事件和load事件提供更精细的页面加载状态管理。

兼容性

IE8+，但是IE的实现有bug

参考