onload 是 window 对象属性，所有资源（html/css/js/图片/iframe等）加载完成后触发；它非 dom 就绪信号，而是页面“可交付使用”终点，常因等待慢资源导致延迟，应优先用 domcontentloaded 处理 dom 初始化。
onload 是 window 对象上的一个属性（也可作为事件监听器使用），它在**所有资源加载完成**后触发，包括 HTML、CSS、JavaScript、<img>、<iframe></iframe>、<object></object> 等。它不是 DOM 构建完成的信号，而是整个页面“可交付使用”的终点。
为什么 onload 常被误用？
很多人以为 onload 是操作 DOM 的安全时机，其实不是——DOM 已经在 DOMContentLoaded 就 ready 了。onload 等的是图片、字体、第三方脚本这些“慢资源”，一旦某张图 404 或 CDN 慢，它就延迟数秒甚至超时不触发。
- 常见错误现象：
document.getElementById("hero-img").naturalWidth在onload外取值为0，但放在onload里仍可能为0（比如图片跨域未设crossorigin） - 如果你只是想绑定按钮点击事件或初始化表单，用
onload属于等过头了，性能浪费明显 -
window.onload = handler会覆盖之前赋值的同名 handler；推荐用window.addEventListener("load", handler)
onload 和 DOMContentLoaded 到底差在哪？
关键区别不在“是否解析完 HTML”，而在**是否等待外部资源就绪**：
-
DOMContentLoaded：HTML 解析完、DOM 树建好就触发，document.querySelector、addEventListener全部可用 -
load：必须等<img src="a.jpg">、<link rel="stylesheet" href="b.css">、<iframe src="c.html"></iframe>全部 loaded（含 HTTP 200/304，不含 404） - 注意：
fetch()、XMLHttpRequest、setTimeout不影响load触发时机
哪些场景非用 onload 不可？
只有当你依赖**渲染后尺寸或资源实际加载状态**时，onload 才是必要选择：
- 需要准确读取
<img>.naturalWidth/.naturalHeight（且已确保跨域设置正确） - 要在
<canvas></canvas>上绘制图片前确认其已解码完成 - 动态插入的
<iframe></iframe>需要等其内容完全载入再通信（注意：子 frame 的load要单独监听） - 某些旧版广告 SDK 或统计脚本明确要求在
load后初始化（查文档确认，别猜）
兼容性和现代替代建议
onload 兼容性极好（IE6+），但现代开发中应主动规避它的延迟陷阱：
- 优先用
document.addEventListener("DOMContentLoaded", ...)处理 DOM 初始化 - 对单张关键图，可用
<img>.decode()+Promise替代全局load等待 - 若需监听多个资源加载，用
PerformanceObserver观察"resource"类型更可控 - 不要在
onload里写耗时同步逻辑（如大数组遍历），它会阻塞页面交互反馈
真正容易被忽略的点是：很多开发者把 onload 当成“页面彻底准备好”的唯一标志，却没意识到它既不可靠（资源失败就不触发），也不精确（你可能只关心某张图，而非全部）。该等什么，得看你的代码到底依赖哪一层就绪状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
