DOMContentLoaded 在 HTML 解析完成、DOM 树构建好即触发，不等待图片等外部资源；window.onload 则需所有资源（含图片、CSS、JS、iframe 等）全部加载解析完毕才执行。
window.onload 和 DOMContentLoaded 都用于监听页面加载完成，但触发时机完全不同：前者等**整个页面（含图片、样式表、脚本、iframe 等所有资源）全部下载并解析完毕**才执行；后者只等**HTML 文档结构解析完成、DOM 树构建好**就触发，不关心外部资源是否加载完。
DOMContentLoaded：DOM 就绪即触发
它在浏览器解析完 HTML、生成 DOM 树后立即触发，此时 CSS 可能尚未加载或解析完成，图片、视频、iframe 等也大概率还没下载完。适合需要尽早操作 DOM 元素的场景，比如绑定事件、修改节点、初始化 UI 组件。
- 支持多个监听器，按注册顺序依次执行
- 如果 DOM 已就绪再添加监听，会立刻同步触发（现代浏览器保证这一点）
- 不等待 CSSOM 构建完成，但若存在阻塞渲染的 CSS（如 在 中），实际触发时间可能被延迟到该 CSS 加载并解析之后（因浏览器会阻塞 DOM 解析以避免 FOUC）
window.onload：所有资源加载完毕才触发
它依赖 load 事件，只有当页面中所有资源（包括 、
- 常用于需确保图片尺寸可用、canvas 绘图前图像已加载、统计“首屏完全加载”等场景
- 只能设置一个 onload 处理函数（重复赋值会覆盖），不如 addEventListener 灵活
- 若某张图片 404 或超时，onload 仍会等待其最终完成（除非被主动中断），可能导致长时间不触发
实际开发中怎么选？
绝大多数 DOM 操作和交互初始化应使用 DOMContentLoaded —— 更快、更可靠、更符合用户感知的“页面可交互”时机。只有明确依赖外部资源（如要读取 img.naturalWidth、播放视频、等 iframe 加载完成）时，才考虑 window.onload 或为特定资源单独监听 load 事件。
立即学习“Java免费学习笔记（深入）”；
- 推荐写法：
document.addEventListener('DOMContentLoaded', handler) - 兼容旧 IE？可降级用
document.readyState === 'interactive'或document.onreadystatechange判断 - 现代项目可直接用
$(document).ready()（jQuery）或框架的生命周期钩子（如 Vue 的 mounted），它们底层基本都基于 DOMContentLoaded
一个小验证技巧
在控制台运行以下代码，配合 Network 面板观察请求状态，就能直观看到两者的触发差异：
document.addEventListener('DOMContentLoaded', () => console.log('DOM ready'));
window.addEventListener('load', () => console.log('All loaded'));
你会发现 “DOM ready” 出现在大部分 JS/CSS 下载完成时，“All loaded” 则要等到所有图片、字体等收尾后才出现。
