BOM 初始化应按页面生命周期选择事件：DOMContentLoaded 用于 DOM 就绪时的主交互，load 用于依赖全部资源加载完成的场景；避免全局脚本过早执行或全堆 load 导致延迟。
在 JavaScript 中，BOM 的初始化操作应根据页面生命周期阶段选择合适的事件来触发，核心是区分 DOM 是否就绪 和 所有资源是否加载完成。用错时机可能导致元素获取失败、交互延迟或重复执行。
DOMContentLoaded：DOM 结构就绪即执行
这个事件在 HTML 解析完成、DOM 树构建完毕后立即触发，不等待图片、CSS、iframe 等外部资源。适合绝大多数 DOM 初始化操作，比如绑定按钮点击、设置表单校验、渲染首屏内容等。
- 监听方式统一使用
document.addEventListener('DOMContentLoaded', callback) - 可多次注册，互不覆盖；比老式
document.onreadystatechange更可靠 - IE9+ 支持，现代项目基本无需兼容处理
- 示例：按钮绑定、导航高亮、首屏轮播初始化
load：全部资源加载完成后执行
该事件由 window 对象触发，需等待 HTML、CSS、JS、图片、字体、iframe 等全部子资源加载并解析完毕。适用于依赖图片尺寸、Canvas 绘图、第三方脚本就绪等场景。
- 推荐用
window.addEventListener('load', callback)，避免覆盖旧逻辑 - 注意：如果页面含大量高清图或慢接口，用户可能已开始交互，但
load还未触发 - 常见用途：统计打点（确保图片加载成功）、获取
img.naturalWidth、初始化依赖外部资源的插件
避免常见陷阱
初始化代码若写在全局脚本中且未加事件保护，容易因执行过早而查不到 DOM 元素；若全堆在 load 里，又会拖慢首屏响应。
立即学习“Java免费学习笔记（深入）”；
- 不要混用
window.onload = fn和addEventListener('load', ...)，前者会被后者覆盖或反过来干扰 - 动态插入的 DOM（如 AJAX 加载内容）需单独初始化，不能依赖页面级生命周期事件
- 现代框架（React/Vue）通常接管了挂载逻辑，BOM 初始化应放在
useEffect(() => {}, [])或mounted钩子中，而非手动监听 - 若需兼容极老环境（IE8 及以下），可用
document.readyState轮询，但目前已无必要
推荐初始化结构
一个轻量、清晰的初始化组织方式：
- DON’T：把所有逻辑塞进一个
load回调里 - DO：用
DOMContentLoaded启动主交互，load补充资源敏感逻辑 - DO：封装初始化函数，按模块拆分（如
initHeader()、initAnalytics()），便于测试和复用 - DO：考虑使用
requestIdleCallback延后非关键初始化，进一步优化主线程压力
