JavaScript 页面加载与卸载相关事件
| 适用范围 | 事件 | 触发时机 | 适用场景 | 特性/注意点 |
|---|
window | load | 页面所有资源（HTML、图片、样式等）加载完成 | 需要确保所有资源加载后再执行逻辑 | 比 DOMContentLoaded 晚，等待资源加载 |
| | beforeunload | 页面即将卸载时（导航到新页面或关闭标签） | 提示用户保存数据或防止意外离开 | 可显示离开确认对话框，设置 event.returnValue |
| | unload | 页面完全卸载时（文档和资源从内存中清除） | 清理资源（如 WebSocket 连接、定时器等） | 现代浏览器限制较多，无法异步执行逻辑 |
| | focus/blur | 页面获得或失去焦点时触发 | 检测用户切换到其他窗口或标签页 | 可结合 document.hidden 检测可见性变化 |
document | DOMContentLoaded | HTML 完全解析完成，资源（图片、样式表等）未必加载完成 | 操作 DOM 元素，不依赖资源加载 | 比 load 更早触发，常用于脚本初始化 |
| | readystatechange | document.readyState 改变时触发，包括 loading、interactive、complete | 监控页面加载状态 | 适合实时监控文档解析和加载的不同阶段 |
| | visibilitychange | 页面的可见性状态改变（如切换标签、最小化窗口） | 检测页面切换状态，节省资源或暂停功能 | 状态通过 document.hidden 或 visibilityState 获取 |
| Chrome 插件 Content Script | run_at: "document_start" | 页面开始加载时（HTML 解析前） | 插入代码以修改页面的初始状态 | 不适合操作 DOM，适合拦截初始 HTML |
| | run_at: "document_end" | HTML 完全解析完成（等同于 DOMContentLoaded） | 操作已解析的 DOM，初始化插件逻辑 | 脚本逻辑不会等待资源加载 |
| | run_at: "document_idle" | HTML 解析完成，大部分资源已加载（页面处于空闲时运行） | 插件的默认运行时机，适用于大部分场景 | 保证 DOM 和大部分资源已准备好 |
window 或特定元素 | error | 资源加载失败时（如图片、脚本、样式表） | 捕获资源加载错误或执行失败的脚本 | 可在 window 或特定元素（如图片）上监听 |
标签: js, chrome, document, window