用 IntersectionObserver 替代 scroll 事件实现图片懒加载,避免主线程卡顿
图片懒加载是博客、电商列表、后台表格里最常见的性能优化手段。过去大多数实现依赖监听 scroll 事件,在回调里遍历所有图片,用 getBoundingClientRect() 判断是否进入视口。这种做法在页面图片数量少的时候没问题,可一旦列表有几百个节点,滚动时每次事件触发都同步计算布局,主线程会被大量 getBoundingClientRect 和样式读取占满,滚动掉帧、白屏、卡顿就跟着来了。更麻烦的是,scroll 事件本身触发频率极高,即使用节流,也无法避免在快速滚动时漏掉图片进入视口的那一帧。浏览器后来提供了 IntersectionObserver,它把“元素是否进入视口”的检测交...