懒加载能提升首屏速度，但仅适用于非首屏资源；对首屏主图误用会导致CLS或空白占位符。loading="lazy"最简但兼容性有限，IntersectionObserver更可控，关键资源应优先使用preload或fetchpriority。
什么是懒加载，它真能提升首屏速度？
懒加载不是“让网页变快”的银弹，而是把图片、iframe、视频等资源的加载时机从页面初始化时推迟到用户即将看到它们的时候。对首屏无影响的长列表、折叠区域、页脚模块里的图片，启用懒加载后，network 面板中初始 img 请求会明显减少，LCP（最大内容绘制）通常能提前 200–800ms。但若首屏主图也被懒加载，反而会触发 CLS（累积布局偏移）或让用户看到空白占位符——这是典型误用。
loading="lazy" 是最简单的方式，但兼容性要注意
现代浏览器原生支持 loading="lazy" 属性，只需在 <img> 或 <iframe> 标签里加上即可：
<img src="product.jpg" loading="lazy" alt="商品图"> <iframe src="widget.html" loading="lazy"></iframe>
但它不支持 Safari 15.4 之前版本、所有 IE、部分旧版 Android WebView。如果项目需兼容 iOS 14 或微信内置浏览器（X5 内核），必须降级为 JavaScript 方案。另外，loading="lazy" 对 background-image 无效，CSS 中的图片无法通过该属性控制。
用 IntersectionObserver 手动实现更可控的懒加载
当需要自定义阈值、监听元素进入视口前 200px 就开始加载、或配合占位图/加载动画时，IntersectionObserver 是首选。它比监听 scroll 事件性能好得多，且自动处理节流。
立即学习“Java免费学习笔记（深入）”；
- 确保目标元素有明确的
data-src属性，原始src可设为空或占位图路径 - 观察器的
rootMargin可设为"200px"实现预加载，避免用户滚动时才触发 - 加载成功后应调用
observer.unobserve(el)，否则重复回调可能引发重复请求 - 注意：Safari 12.1+ 支持，iOS 12.2+ 可用；如需支持更低版本，得用
getBoundingClientRect()+scroll回退方案
最小可用示例：
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { rootMargin: '200px' });
lazyImages.forEach(img => observer.observe(img));
懒加载不是万能的，别忽略关键资源的加载优先级
HTML 中的 <link rel="preload"> 和 <img fetchpriority="high"> 才是首屏核心图片的正确优化方式。懒加载和这些声明冲突时，浏览器以 fetchpriority 为准——比如给轮播首图加了 loading="lazy" 却没删 fetchpriority="high"，Chrome 仍会立即加载它。另外，srcset + sizes 配合懒加载时，要确保 data-srcset 同步替换，否则高 DPR 设备可能加载错尺寸。
真正影响体验的，往往不是“有没有懒加载”，而是“哪些该懒、哪些绝不能懒”。首屏大图、Logo、核心按钮图标，一律不该进懒加载队列。
