DOM 加载的生命周期

这里讨论的是浏览器加载资源和设置DOM的状态的时机，如果单纯说是网页的加载流程显得有点大，所以取了个名字是 DOM 加载的生命周期。这里我们默认 DOM 就是一个网页加载时的HTML ：从 DOM 准备 – 加载完成的阶段

  • domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节。
  • domInteractive：表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点，表示 DOM 准备就绪的时间点。
  • domContentLoaded：表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点，这意味着现在我们可以构建渲染树了，如果没有阻塞解析器的 JavaScript，则 DOMContentLoaded 将在 domInteractive 后立即触发。
    • 许多 JavaScript 框架都会等待此事件发生后，才开始执行它们自己的逻辑。因此，浏览器会捕获 EventStart 和 EventEnd 时间戳，让我们能够追踪执行所花费的时间。
  • domComplete：顾名思义，所有处理完成，并且网页上的所有资源（图像等）都已下载完毕，也就是说，加载转环已停止旋转，表示网页及其所有子资源都准备就绪的时间点。
  • loadEvent：作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑。