IntersectionObserver 懒加载 与 content-visibility 协同治理实践

核心价值观察进入视口的元素，按需加载图片与模块，降低初始负载。用 content-visibility 提前跳过不可见子树布局与绘制，并通过 contain-intrinsic-size稳定占位。结构与样式<ul class="feed"> <li class="item"><img data-src="/img/a.jpg" alt="" /></li> <li class="item"><img data-src="/img/b.jpg" alt="" /></li> <li class="item"><img data-src="/img/c.jpg" alt="" /></li> </ul> .feed { display: grid; gap: 12px; } .item { content-visibility: auto; contain-intrinsic-size: 200px; } .item img { inline-size: 100%; block-size: auto; object-fit: cover; } 懒加载逻辑const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { const img = e.target.querySelector('img') if (img && img.dataset.src) { img.src = img.dataset.src img.removeAttribute('data-src') } io.unobserve(e.target) } } }, { rootMargin: '200px 0px' }) document.querySelectorAll('.item').forEach((el) => io.observe(el)) 治理建议对首屏关键图仍使用正常加载并配合 `priority/fetchpriority`；懒加载适用于次要与下方资源。预留合理 `contain-intrinsic-size`，避免解码后高度变化导致 CLS。结论IO 懒加载与 content-visibility 的组合可在不牺牲体验的前提下显著降低初始渲染与主线程压力，提升整体性能与稳定性。