Chrome浏览器DOMContentLoaded事件触发时机为何有时晚于load事件？

在正常情况下，DOMContentLoaded 事件通常会在 load 事件之前触发。DOMContentLoaded 事件在 HTML 文档被完全加载和解析后触发，而 load 事件则是在所有资源（如图片、样式表、脚本等）都加载完成后触发。因此，DOMContentLoaded 通常会在 load 事件之前触发。

然而，在某些情况下，DOMContentLoaded 事件可能会晚于 load 事件触发。这种情况通常与以下原因有关：

1. 异步脚本的执行

• 如果页面中有异步脚本（<script async>），这些脚本可能会在 DOMContentLoaded 事件触发之前或之后执行。如果这些脚本的执行时间较长，可能会导致 DOMContentLoaded 事件延迟触发。
• 如果异步脚本在 DOMContentLoaded 事件触发之前执行，并且脚本中包含了阻塞 DOM 解析的代码（例如同步的 document.write），那么 DOMContentLoaded 事件可能会被延迟到 load 事件之后。

2. 动态插入的脚本

• 如果页面中有通过 JavaScript 动态插入的脚本（例如使用 document.createElement('script') 并插入到 DOM 中），这些脚本的加载和执行可能会影响 DOMContentLoaded 事件的触发时机。
• 如果这些脚本在 load 事件触发之后才加载和执行，那么 DOMContentLoaded 事件可能会被延迟到 load 事件之后。

3. 阻塞的 CSS 或 JavaScript

• 如果页面中有阻塞渲染的 CSS 或 JavaScript（例如没有使用 async 或 defer 的脚本），这些资源可能会延迟 DOMContentLoaded 事件的触发。
• 如果这些资源的加载时间较长，可能会导致 DOMContentLoaded 事件在 load 事件之后触发。

4. 浏览器渲染引擎的优化

• 现代浏览器会对页面的加载和渲染进行优化，可能会在某些情况下调整事件的触发顺序。例如，如果浏览器认为某些资源的加载不会影响页面的初始渲染，它可能会优先触发 load 事件。

5. 扩展或插件的影响

• 浏览器扩展或插件可能会在页面加载过程中注入脚本或修改 DOM，这可能会影响 DOMContentLoaded 事件的触发时机。

解决方法

• 检查异步脚本：确保异步脚本不会阻塞 DOM 解析，避免使用 document.write 等阻塞操作。
• 优化资源加载：使用 async 或 defer 属性来加载脚本，避免阻塞 DOM 解析。
• 减少阻塞资源：尽量减少阻塞渲染的 CSS 和 JavaScript，优化页面加载性能。
• 监控扩展或插件：检查是否有浏览器扩展或插件影响了页面的加载过程。

通过以上方法，可以尽量避免 DOMContentLoaded 事件晚于 load 事件触发的情况。