HTML解析过程会触发哪些事件？

2019-03-11 1,154 阅读1分钟

本文参考MDN。

先了解一下几个事件，答案在最后面。

`readystatechange`事件

当readyState的属性值发生更改时，将触发该事件。

readyState可以取以下值：

loading：表示document仍在加载
interactive：文档已完成加载和解析，但子资源（如images,stylesheets and frames）仍在加载
complete文档和所有子资源已完成加载，load事件即将开始。

`load`事件

当资源及其依赖的资源已完成加载时触发。当页面完全加载后（包括所有的图像、JavaScript文件、css文件等外部资源）。

load加载给定资源时将触发onload事件

`DOMContentLoaded`事件

当最初的HTML文档已被完全加载和分析时触发，而无需等待stylesheets，images、和subframes完成加载。

DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载。

执行顺序

readystatechange， loading状态 -> readystatechange， interactive状态 ->DOMContentLoaded事件 -> readystatechange， complete状态 -> window.onload