dom树加载完成指html解析完毕、节点构建就绪，此时可安全操作dom；推荐使用domcontentloaded事件，它在dom构建完成后立即触发，比window.onload更快，适合初始化脚本。
DOM 树加载完成，指的是 HTML 文档解析完毕、节点已构建好、可以安全操作元素的状态。此时不等图片、CSS、iframe 等外部资源，只关注结构就绪——这是绝大多数初始化脚本（如绑定按钮、查询元素、设置事件）的**最早安全时机**。
推荐用 DOMContentLoaded 事件
这是标准、轻量、兼容性好的首选方式，现代浏览器全部支持：
- 它在 HTML 解析完成、DOM 树构建完毕 后立即触发，比
window.onload快得多 - 适合执行 DOM 查询（
document.getElementById）、事件绑定、样式初始化等依赖结构的操作 - 写法简洁，无需额外判断状态
示例：
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('#submit-btn');
if (btn) {
btn.addEventListener('click', handleSubmit);
}
});
兼容老版 IE 的 fallback 方案
若需支持 IE8 及更早版本（现已极少见），可补充 doScroll 检测逻辑：
- IE 中可通过
document.documentElement.doScroll('left')是否抛错来判断 DOM 是否就绪 - 配合
readystatechange事件监听document.readyState状态变化 - 实际项目中，除非明确要求兼容 IE8，否则无需手动实现，可用现代打包工具自动处理
慎用 window.onload
window.onload 或 window.addEventListener('load', ...) 触发时机更晚：
- 必须等所有资源（图片、样式表、字体、iframe 等）全部下载并渲染完成才触发
- 在网速慢或页面含大量图片时，可能延迟数秒，导致交互初始化明显滞后
- 仅适用于依赖完整渲染结果的场景，比如测量图片尺寸、截图准备、统计首屏加载时间
检查 readyState 属性作为辅助手段
document.readyState 是一个只读字符串，有三个值：
-
'loading'：文档正在加载中 -
'interactive'：DOM 已解析完毕，但资源仍在加载（此时DOMContentLoaded已触发） -
'complete'：所有资源加载完成（等同于load事件触发后）
可在脚本开头快速判断是否已就绪，避免重复监听：
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init(); // 已就绪，直接执行
}Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
