从一次线上事故看 IntersectionObserver 与 getBoundingClientRect 的性能差异
前段时间我们后台管理系统的一个长列表页面在低端安卓机上出现了严重的滚动卡顿,用户反馈“滑不动”。排查后发现是列表项在滚动时不断通过 getBoundingClientRect() 判断是否进入视口来触发图片懒加载和曝光埋点。这种写法在桌面端没什么问题,但在移动端滚动事件里频繁调用布局属性,每次都强制浏览器重排,直接拖垮了帧率。后来换成 IntersectionObserver 后,卡顿消失。这篇文章会从浏览器渲染机制讲起,对比两种方案在滚动场景下的实际开销,给出一套可落地的迁移思路,并说明 IntersectionObserver 的 rootMargin、threshold 等配置在懒加载和...