懒加载是HTML5页面刚需，应优先用IntersectionObserver实现，并配loading="lazy"降级；对img/iframe用data-src，广告位需防伪懒加载，禁用自动发现并延迟加载SDK。
页面卡顿、首屏加载慢，大概率是元素没做懒加载
HTML5 页面里塞了几十个 或自定义组件，但用户只看首屏，其余内容却在页面初始化时就全部解析、渲染、请求资源——这是典型「过度加载」。直接后果：首屏时间拉长、内存占用飙升、低端设备卡死。懒加载不是锦上添花，而是现代 HTML5 页面的刚需。
IntersectionObserver 是当前最稳妥的懒加载实现方式
比起监听 scroll + getBoundingClientRect() 的老方案，IntersectionObserver 由浏览器原生调度，不触发重排重绘，性能开销极低，且能准确感知元素是否进入视口（包括 overflow: scroll 容器内）。它已全平台支持（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）。
实操建议：
- 对所有非首屏
src挪到data-src，用IntersectionObserver监听后赋值回src - 对
，同样用data-src存真实地址，进入视口后再设src，避免提前加载第三方脚本 - 对自定义 Web Component 或 Vue/React 组件，可在
observedCallback或useEffect中触发初始化逻辑，而非挂载即执行 - 设置
rootMargin: '0px 0px 200px 0px'提前加载，避免滚动过快时出现空白
图片懒加载必须配 loading="lazy" 作为降级兜底
loading="lazy" 是 HTML 原生属性，对 有效，无需 JS 即可启用基础懒加载。但它有明确限制：仅对非 CSS 背景图、非 display: none 元素生效；Safari 15.4+ 才支持 ；部分安卓 WebView 不识别。
立即学习“前端免费学习笔记（深入）”；
所以正确姿势是：
- 所有
loading="lazy"，哪怕你已用IntersectionObserver - 同时保留
data-src和 JS 初始化逻辑——当浏览器不支持loading="lazy"时，JS 方案自动接管 - 不要依赖它单独工作：它无法控制加载时机精度，也不支持自定义占位、错误重试、多图批量加载等场景
第三方组件或广告位懒加载要防「伪懒加载」
很多广告 SDK 或统计脚本会主动扫描 DOM，一看到
