DOMContentLoaded 是操作 DOM 最早且最安全的时机；它在 HTML 解析完成、DOM 树构建完毕后立即触发，支持事件绑定与组件初始化，但图片、CSS 等资源可能未加载完，比 load 快 200–800ms。
DOMContentLoaded 是你操作 DOM 最早且最安全的时机；load 等所有资源加载完才触发，通常没必要等；beforeunload 是唯一能弹出确认对话框的出口，但现代浏览器已屏蔽自定义文案。
DOMContentLoaded 为什么比 load 更常用
它在 HTML 解析完成、DOM 树构建完毕后立即触发，此时 document.querySelector、addEventListener 都能正常工作，但 <img alt="掌握HTML页面生命周期与事件触发机制" >、外部 CSS、字体等可能还没加载完。这意味着你可以立刻绑定事件、初始化组件，而不用卡在图片或字体加载上。
- 常见错误现象：在
load里写 DOM 初始化逻辑，导致首屏交互延迟明显，尤其在弱网或大图场景下 - 使用场景：注册按钮点击事件、渲染首屏 React/Vue 根节点、设置表单默认值
- 性能影响：DOMContentLoaded 通常比 load 快 200–800ms，具体取决于页面资源体积
- 注意点：不要在
DOMContentLoaded回调里读取img.offsetWidth或getComputedStyle(img).width，大概率是0
script 标签如何影响 DOMContentLoaded 触发时机
浏览器解析 HTML 时遇到同步 <script></script>，会暂停 DOM 构建，先下载（如果是外部脚本）、解析、执行。也就是说，DOMContentLoaded 一定会等这些脚本执行完才触发。
- 阻塞行为：未加
defer或async的内联脚本或外部脚本都会推迟DOMContentLoaded - 推荐做法：把初始化逻辑放在
DOMContentLoaded监听器里，而不是靠脚本位置“碰运气” - 容易踩的坑：在
里放了未defer的第三方 SDK 脚本，结果整个 DOM 就绪被拖慢好几百毫秒 - 验证方法：打开 DevTools → Network → 刷新页面，看
DOMContentLoaded时间戳是否紧贴 HTML 加载完成线
beforeunload 的实际可用边界在哪
它是唯一允许同步弹出原生确认对话框的事件，但仅限于用户有“有效交互”后的页面（比如输入过表单、点击过按钮），且浏览器只显示统一文案：“离开此页面可能会丢失您输入的数据。” 自定义消息早已被 Chrome/Firefox/Safari 全面禁用。
立即学习“前端免费学习笔记（深入）”；
- 触发条件：用户点击关闭标签页、刷新、输入新 URL、调用
location.href = '...'等导航行为 - 不能做的事：异步请求（如
fetch）、修改 DOM、调用alert/confirm（会直接忽略） - 必须做的事：在事件处理器中给
event.returnValue赋一个非空字符串（哪怕只是' '），否则不弹窗 - 兼容性注意：
beforeunload在 iOS Safari 中对 iframe 内页面不触发，PWA 环境下也可能失效
document.readyState 的三种状态怎么用
它提供了一个轻量级判断文档加载阶段的方式，比监听事件更底层，适合做快速守卫或降级逻辑。
-
loading：文档仍在加载中，document可能为空或不完整，禁止访问子节点 -
interactive：HTML 解析完成，DOM 构建完毕，等同于DOMContentLoaded开始前一刻 -
complete：所有资源加载完毕，等同于load触发后 - 实用技巧：在模块入口加
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); }，避免重复绑定 - 注意点：
readyState不会触发重排或重绘，但它本身不是事件，不能监听，只能轮询或配合事件使用
真正容易被忽略的是：DOMContentLoaded 并不保证样式计算完成——如果 JS 依赖某个元素的 offsetHeight，而该高度由外部 CSS 文件中的规则决定，那即使 DOM 已就绪，仍可能拿到错误值。这种情况下，要么加 requestAnimationFrame 延后一帧，要么监听 document.fonts.load 或用 ResizeObserver 补位。
