DOMContentLoaded比load更常用，因它在DOM构建完成即触发，不等图片、CSS等资源，支持多次监听且更早启用交互；load则需等待所有资源加载完，仅适用于读取图片尺寸等特定场景。
DOMContentLoaded 代替 body onload 是更安全的选择 看似简单，实际会埋下多个隐患：只能绑定一个函数、易被第三方脚本覆盖、触发时机晚（等所有图片/CSS/字体加载完）、无法移除或调试。现代项目里，它基本该被弃用。
推荐直接改用 document.addEventListener("DOMContentLoaded", ...)：
- DOM 构建完成就触发，不等图片、iframe、CSS，首屏交互可提前 300–800ms 就绪
- 支持多次监听，
initButtons()、setupFormValidation()可分别注册，互不干扰 - 不依赖 HTML 结构位置，JS 放
<head>里加defer也完全安全 - 不会污染
window.onload，避免和统计 SDK、广告脚本冲突
示例写法：
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("submit-btn").addEventListener("click", handleSubmit);
document.querySelector("form").reset();
});
window.onload 还剩什么不可替代的场景
不是所有情况都能用 DOMContentLoaded 替代 —— 它只管 DOM 就绪，不管资源是否加载完成。真需要等全部资源，才保留 window.onload：
- 读取
<img>的naturalWidth/naturalHeight：必须等图片解码完成，否则返回 0 - 做完整首屏性能打点（含图片、字体、CSS 加载耗时）
- 某些旧版 IE 兼容兜底逻辑（但当前已极少需支持 IE9 以下）
注意：window.onload 仍存在覆盖风险。如果必须用，建议封装成追加式注册：
立即学习“前端免费学习笔记（深入）”；
function addOnload(fn) {
const old = window.onload;
window.onload = old ? () => { old(); fn(); } : fn;
}
addOnload(() => console.log("A"));
addOnload(() => console.log("B")); // 两者都会执行
loading 动画遮罩层该用哪个事件隐藏
很多 loading 遮罩层写在 <body> 开头，却用 DOMContentLoaded 隐藏 —— 这会导致文字、图标、按钮先闪出来，再消失，用户体验割裂。
- 遮罩层必须用
window.addEventListener("load", hideLoading)隐藏，确保所有资源（尤其是首图、关键字体）加载完毕 - 但要加 8 秒超时兜底：
setTimeout(hideLoading, 8000)，防止某张图 404 导致永远不隐藏 - 别用
document.body.removeChild()，display: none更稳妥，避免 DOM 已销毁时报错
关键点在于：loading 层的“出现”靠 HTML 顺序（<body> 后立即写），“消失”靠资源加载完成，二者时机必须匹配。
为什么不能对任意 HTML 元素用 onload 属性
onload 不是通用属性，浏览器只认少数元素： <body>、<img>、<iframe>、<script>、<link>（部分场景）。给 <div> 或 <section> 写 onload="doSomething()" 完全无效 —— 解析器会忽略，控制台也不报错，容易误以为逻辑没跑。
- 想监听某个元素是否“加载完成”，本质是判断它是否已存在于 DOM 中，用
DOMContentLoaded+querySelector即可 - 若该元素是 JS 动态插入的（如 React 渲染），应在其插入后立即调用函数，而非依赖不存在的
onload - 图片级加载可用
<img onload="handleImageLoad()">，但更推荐用img.addEventListener("load", ...)，便于移除和复用
真正容易被忽略的，是把 onload 当作“任意元素就绪钩子”的惯性思维 —— 它从来就不是为这个设计的，强行套用只会让问题延迟暴露。
