用 IntersectionObserver 替代滚动事件:解决页面卡顿与图片懒加载的实战方案
页面滚动时监听 scroll 事件做懒加载、动画触发或吸顶效果,是很多项目里的常规做法。但滚动事件触发频率极高,如果在回调里直接读取 getBoundingClientRect() 或修改 DOM,很容易造成掉帧,尤其在低端安卓机上滑动会明显发涩。早期常见优化是加节流,但节流时间设长了效果滞后,设短了依旧频繁计算。IntersectionObserver 提供了一种更优雅的解法:由浏览器内部监控目标元素与视口的交叉状态,只在真正进入或离开时通知回调,把计算压力从主线程移走。这篇文章会从一个实际卡顿案例出发,梳理滚动监听常见问题、IntersectionObserver 的用法与配置,并给出图片...