domcontentloaded在dom构建完成时触发，不等待外部资源；load在所有资源加载完后触发；beforeunload和unload用于页面卸载前处理；现代推荐用intersectionobserver和visibilitychange等api替代传统事件。
页面加载生命周期事件处理，核心是理解不同事件的触发时机和适用场景，避免误用或遗漏关键节点。
DOMContentLoaded：DOM 构建完成就触发
这个事件在 HTML 文档解析完毕、DOM 树构建完成时触发，不等待样式表、图片、iframe 等外部资源加载。适合做 DOM 初始化、绑定事件监听器、操作元素结构等操作。
- 使用
document.addEventListener('DOMContentLoaded', callback)注册，推荐方式；也可用document.onreadystatechange配合readyState === 'interactive'判断，但兼容性和可读性较差 - 注意：如果脚本是
defer加载，它本身执行时机就接近 DOMContentLoaded，此时再监听该事件可能已错过，建议统一用事件监听而非依赖执行顺序 - 不要在此阶段读取
offsetHeight等依赖样式计算的属性，因为 CSS 可能还没加载或解析完
load：所有资源都加载完成才触发
该事件在页面所有资源（包括图片、样式表、脚本、字体等）全部下载并解析完毕后触发。适用于需要确保图片尺寸、背景图加载完成、字体就绪后再执行的操作。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 监听
window.addEventListener('load', callback)；也可监听特定元素如img.addEventListener('load', ...) - 相比 DOMContentLoaded，它更“重”，延迟明显，尤其在网络慢或图片多时；非必要不在此阶段操作 DOM 结构
- 注意：CSS 文件加载失败（如 404）也会阻塞 load 事件，导致回调永不执行，需配合错误监控
beforeunload 和 unload：页面卸载前的最后机会
这两个事件用于处理用户离开页面前的逻辑。beforeunload 允许弹出提示框（现代浏览器限制为仅在有用户交互后才生效），unload 则无法阻止跳转且执行环境受限（如不能发起网络请求）。
-
beforeunload回调中返回字符串（或设置e.returnValue）可触发浏览器确认对话框，但仅限用户主动导航（刷新、关闭、跳转）；程序化跳转（如location.href = ...）不会触发 -
unload已被多数浏览器禁用异步操作，推荐改用visibilitychange或pagehide替代部分需求（如记录停留时长、清理轻量状态） - 避免在
unload中调用fetch或XMLHttpRequest，它们大概率被忽略或中断
现代替代方案：IntersectionObserver 与 Page Visibility API
对于滚动懒加载、页面可见性判断等常见需求，原生事件已不够精细，推荐结合新 API 提升体验和性能。
- 用
IntersectionObserver替代scroll+getBoundingClientRect()实现图片/组件懒加载，更高效且支持离屏检测 - 监听
document.addEventListener('visibilitychange', () => { if (document.hidden) { /* 页面切到后台 */ } })来暂停视频、定时器或上报用户活跃度 -
pageshow/pagehide比load/unload更可靠，尤其处理浏览器前进/后退缓存（bfcache）场景
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
