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 的组合可在不牺牲体验的前提下显著降低初始渲染与主线程压力，提升整体性能与稳定性。