用 IntersectionObserver 替代滚动事件：解决页面卡顿与图片懒加载的实战方案
原创
用 IntersectionObserver 替代滚动事件：解决页面卡顿与图片懒加载的实战方案
超哥前端记录
发布于 2026-10-07 09:44:44
发布于 2026-10-07 09:44:44
概述
页面滚动时监听 scroll 事件做懒加载、动画触发或吸顶效果，是很多项目里的常规做法。但滚动事件触发频率极高，如果在回调里直接读取 getBoundingClientRect() 或修改 DOM，很容易造成掉帧，尤其在低端安卓机上滑动会明显发涩。早期常见优化是加节流，但节流时间设长了效果滞后，设短了依旧频繁计算。IntersectionObserver 提供了一种更优雅的解法：由浏览器内部监控目
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号