window.onload 会覆盖先前赋值，仅执行最后一次；<body onload> 同样只能绑定一个函数且易被覆盖；DOMContentLoaded 更优——DOM就绪即触发、支持多监听、不依赖资源加载。
window.onload 和 <body onload="..."> 都能等页面完全加载后执行代码，但现代项目里基本不用前者——它会覆盖其他同类型监听，且无法控制执行顺序。
body 上直接写 onload 属性会有什么问题
这种写法看似简单：<body onload="init()">，但它有几个实际坑点：
- 只能绑定一个函数，后续任何对
onload的赋值（比如第三方脚本）都会覆盖掉你原来的逻辑 - HTML 解析是同步的，但浏览器可能在解析到
<body>标签时还没准备好 DOM，尤其当<script>放在<head>里又没加defer - 它等的是“所有资源”，包括图片、CSS、外部字体——如果你只是想操作 DOM，等这些没必要，会明显延迟执行
- 不支持事件委托或移除，调试和维护困难
window.onload 被多次赋值时会发生什么
window.onload = function() {...} 是给 window 对象的 onload 属性直接赋值。关键点在于：
- 每次赋值都会替换前一次，不是追加——
window.onload = a; window.onload = b;最终只执行b - 如果多个库或模块都这么写（比如统计 SDK、广告脚本），你的初始化函数很可能被静默干掉
- 它和
<body onload="...">实际共享同一个底层事件处理器，所以两者互斥
示例：window.onload = () => console.log("A"); window.onload = () => console.log("B"); —— 控制台只会输出 B。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
DOMContentLoaded 比 onload 更适合大多数场景
真正需要 DOM 就绪（而不是所有图片加载完）时，应该用 DOMContentLoaded：
- 触发时机早得多：HTML 解析完成、DOM 构建好就触发，不等图片、CSS、iframe 等
- 可多次添加监听：
document.addEventListener("DOMContentLoaded", fn1); document.addEventListener("DOMContentLoaded", fn2);都会执行 - 兼容性极好：IE9+、所有现代浏览器都支持
- 不会污染全局对象，也不依赖 HTML 结构位置
推荐写法：
document.addEventListener("DOMContentLoaded", () => {
// 这里可以安全操作 document.getElementById、querySelector 等
initButtons();
setupFormValidation();
});
什么时候才真得用 onload
只有明确需要等待**全部资源加载完成**时才考虑 onload，比如：
- 要读取
<img>的自然尺寸（naturalWidth/naturalHeight），必须等图片加载完 - 做首屏性能打点，需包含图片、字体等完整加载时间
- 某些旧版 IE 兼容逻辑（但现在基本不用了）
这时建议统一用 addEventListener 方式：
window.addEventListener("load", () => {
console.log("所有资源（含图片、CSS、JS）已加载完毕");
}); —— 它不会覆盖已有监听，比直接赋值 window.onload 安全得多。
真正容易被忽略的是：很多人以为 onload 是“页面加载完成”的唯一标准，其实它只是最慢的那个节点；多数初始化操作根本不需要等到那一刻。
