页面加载流程监听与控制需按阶段选用事件：DOMContentLoaded在DOM解析完成时触发，适合初始化操作；load在所有资源加载完毕后触发，适用于依赖资源完整性的场景；beforeunload和unload用于页面卸载前的清理与提示。
页面加载流程的监听与控制，核心在于理解不同阶段的触发时机，并选用匹配的事件。关键不是“等全部完事再动手”，而是按需在 DOM 可用时、资源就绪时或用户即将离开时精准介入。
DOM 解析完成就执行：用 DOMContentLoaded
这个事件在 HTML 文档解析完毕、DOM 树构建完成时立即触发，不等待图片、样式表、iframe 等外部资源。适合做 DOM 初始化、绑定按钮点击、设置表单默认值等操作。
- 必须监听
document，不是window - 内联脚本（无
defer/async）会阻塞解析，从而延迟该事件 - 多次调用
addEventListener('DOMContentLoaded', ...)均有效，按注册顺序执行 - 示例：
document.addEventListener('DOMContentLoaded', () => { document.querySelector('button').onclick = () => alert('已可操作'); });
所有资源都到位才执行：用 load
这个事件在页面及所有依赖资源（图片、CSS、JS、字体、iframe 等）全部加载并解析完成后触发。适合需要读取图片尺寸、计算布局、生成缩略图等强依赖资源完整性的场景。
- 监听对象是
window，也可用于单个<img>或<script>元素 - 用
window.onload = fn会覆盖前一次赋值；推荐用addEventListener('load', fn)支持多次绑定 - 若页面含大图或慢接口，
load可能比DOMContentLoaded晚数秒甚至更久 - 示例：
window.addEventListener('load', () => { console.log('宽高、图片、字体全就绪'); });
用户要关页/刷新前做清理：用 beforeunload 和 unload
这两个事件用于资源释放和状态保存，但用途和限制差异明显。
立即学习“Java免费学习笔记（深入）”；
-
beforeunload在跳转、刷新、关闭前触发，可弹出浏览器原生确认框（需返回字符串），适合提醒用户未保存内容 -
unload触发时页面已开始卸载，无法执行耗时操作或发起网络请求（现代浏览器会忽略fetch等），仅适合轻量同步清理（如移除定时器、取消未完成的requestIdleCallback） - 两者都只能监听
window，且不可阻止页面真正卸载（安全限制） - 示例：
window.addEventListener('beforeunload', e => { if (formIsDirty) e.returnValue = '确定要离开？'; });
进阶控制：配合脚本加载策略与性能观测
单纯监听事件还不够，还需主动干预加载节奏与可观测性。
- 对非首屏 JS 使用
defer，确保执行在 DOM 解析后、DOMContentLoaded前；用async加载完全独立的脚本（如统计 SDK） - 用
PerformanceObserver监听resource类型条目，实时掌握每个 CSS/JS 的加载耗时与状态 - 结合
document.readyState（值为loading/interactive/complete）做状态兜底判断 - 避免在
load中重复绑定事件——DOMContentLoaded已足够大多数交互初始化
