DOMContentLoaded 和 load 有什么区别？

详细解析#

触发时机#

1. 开始解析 HTML，readyState 为 loading
   ├─ 同步脚本：暂停解析，下载并执行完再继续
   ├─ defer 脚本：并行下载，等 HTML 解析完再按顺序执行
   └─ async 脚本：并行下载，下载完立即执行
2. HTML 解析完成，readyState 变为 interactive
   ├─ 按顺序执行 defer 脚本
   └─ 在 document 上触发 DOMContentLoaded
3. 图片、样式表、iframe、async 脚本等全部加载完成，readyState 变为 complete
   └─ 在 window 上触发 load

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 已就绪，可以操作元素了')
})

window.addEventListener('load', () => {
  console.log('图片等资源都加载完了')
})

样式表会推迟 DOMContentLoaded 吗#

样式表本身不会，HTML 解析不用等 CSS 下载。但脚本执行前要等已经解析到的样式表加载完，因为脚本可能会读取样式（比如调用 getComputedStyle）。所以如果样式表后面跟着同步脚本，脚本要等样式表，HTML 解析也跟着暂停，DOMContentLoaded 就被间接推迟了。defer 脚本同样要等样式表，也会间接推迟它。

在 DevTools 中查看#

Network 面板底部会显示 DOMContentLoaded 和 Load 的时间，瀑布图中分别对应蓝线和红线。

页面离开相关的事件#

unload 并不可靠：移动端页面切到后台后，可能被系统直接回收，unload 根本不会触发；而且在 Firefox 和桌面版 Chrome 中，监听 unload 会让页面无法进入 bfcache。所以数据上报应该在 visibilitychange 变为 hidden 时，用 navigator.sendBeacon 发送（见前端监控）：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 由浏览器在后台发送，页面随后被关闭也不影响
    navigator.sendBeacon('/log', JSON.stringify(collectData()))
  }
})

面试官可能追问#

function onReady(fn) {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fn)
  } else {
    // interactive 或 complete：DOM 已经解析完，直接执行
    fn()
  }
}

易错点#

• DOMContentLoaded 不等图片，在它的回调里读取图片尺寸可能得到 0，要在 load 或图片自己的 load 事件里读取
• 样式表本身不推迟 DOMContentLoaded，是脚本（包括 defer 脚本）要等样式表加载完才能执行，才间接推迟了它
• 从 bfcache 恢复的页面不会再触发 DOMContentLoaded 和 load，需要监听 pageshow，并通过 event.persisted 判断