秒杀页懒加载卡顿的根源在于滚动监听未节流及IntersectionObserver回调中触发强制同步布局；正确做法是用requestIdleCallback包裹src赋值并添加contain: layout隔离渲染。
为什么秒杀页的懒加载会频繁触发又卡顿
因为滚动监听没节流，IntersectionObserver 回调里反复读取 offsetTop 或调用 getBoundingClientRect()，触发强制同步布局（layout thrashing）。秒杀页商品瀑布流密集、DOM 节点多，每次滚动哪怕 1px 都可能让几十张图同时进入阈值，浏览器来不及渲染就堆满任务队列。
常见错误现象：用户快速滑动时图片批量闪现、白屏几帧、CPU 占用飙升；慢速滚动反而加载滞后，图片“追着视口跑”。
- 别在回调里直接操作
img.src前先查img.offsetWidth—— 这会强制重排 - 复用同一个
IntersectionObserver实例，不要为每张图 new 一个 - 设
rootMargin: '300px'提前加载，但别超过 500px，否则首屏带宽压力翻倍 - 回调中立刻执行
observer.unobserve(img)，防止同一张图被重复触发
loading="lazy" 在秒杀页到底能不能用
能，但必须满足三个硬条件，缺一不可：有明确 width/height、srcset+sizes 同时存在、且不用于首屏内任何一张图。秒杀页首屏通常包含倒计时模块、主商品图、抢购按钮——这些全得删掉 loading="lazy"，否则 Chrome 可能跳过加载或 CLS 暴增。
兼容性陷阱更实际：iOS Safari 15.4 以下版本完全忽略 loading="lazy"，而国内大量安卓 WebView（尤其厂商定制版）连 IntersectionObserver 都不支持，只认 JS 手动方案。
立即学习“前端免费学习笔记（深入）”；
- 首屏图必须写死
src，禁用loading="lazy" - 非首屏商品图统一用
data-src+ JS 触发，fallback 更可控 -
srcset中的 URL 必须和 CDN 参数规则一致，比如goods.jpg?w=375和srcset="goods.jpg?w=375 375w"要严格匹配，否则懒加载后拉错尺寸
如何让懒加载在高并发滚动下不丢帧
核心是把 DOM 更新从主线程卸载出去——不是靠“优化 JS”，而是靠浏览器原生机制绕过布局计算。秒杀页最有效的做法是：用 requestIdleCallback 包裹 src 赋值，再配合 CSS contain: layout 隔离商品卡片渲染影响范围。
实测数据：某大促页在 60fps 滚动下，未加 requestIdleCallback 时平均帧耗时 28ms；加上后压到 12ms 以内，且无丢帧。
- 不要在 IntersectionObserver 回调里直接赋值
img.src，改用requestIdleCallback(() => { img.src = img.dataset.src; }) - 每个商品卡片外层加
style="contain: layout"，阻止其 layout 影响全局重排 - 禁用
will-change: transform等伪优化，秒杀页 DOM 变化频繁，反而增加合成层开销
电商秒杀页懒加载最容易被忽略的三个细节
一是服务端渲染（SSR）时，data-src 值必须和客户端一致，否则 hydration 后 DOM 差异导致 React/Vue 强制重 render；二是 CDN 缓存策略要排除 data-src 参数，否则不同设备请求同一 URL 却拿到不同尺寸图；三是用户截屏或打印时，懒加载图根本不会出现——如果页面含“分享海报”功能，得额外用 document.visibilityState === 'visible' 补全。
真正卡住上线的，往往不是技术多难，而是这些点没对齐。
