By Noxxxx from https://www.noxxxx.com/?post_type=post&p=1355
欢迎分享与聚合,尊重版权,可以联系授权
这里讨论的是浏览器加载资源和设置DOM的状态的时机,如果单纯说是网页的加载流程显得有点大,所以取了个名字是 DOM 加载的生命周期。这里我们默认 DOM 就是一个网页加载时的HTML :从 DOM 准备 – 加载完成的阶段
domLoading
:这是整个过程的起始时间戳,浏览器即将开始解析第一批收到的 HTML 文档字节。domInteractive
:表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点,表示 DOM 准备就绪的时间点。domContentLoaded
:表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点,这意味着现在我们可以构建渲染树了,如果没有阻塞解析器的 JavaScript,则DOMContentLoaded
将在domInteractive
后立即触发。- 许多 JavaScript 框架都会等待此事件发生后,才开始执行它们自己的逻辑。因此,浏览器会捕获
EventStart
和EventEnd
时间戳,让我们能够追踪执行所花费的时间。
- 许多 JavaScript 框架都会等待此事件发生后,才开始执行它们自己的逻辑。因此,浏览器会捕获
domComplete
:顾名思义,所有处理完成,并且网页上的所有资源(图像等)都已下载完毕,也就是说,加载转环已停止旋转,表示网页及其所有子资源都准备就绪的时间点。loadEvent
:作为每个网页加载的最后一步,浏览器会触发onload
事件,以便触发额外的应用逻辑。