造成滚动卡顿的常见原因

图片加载造成的 overf🎵low 卡顿尤其容易被忽略。没有宽高占位时，浏览器会在图片加载完成后重新计算附近内容的位置，因此列表滚动和阅读位置都可📢能发生变化。

滚动事件中不应反复调用布局测量并立即修改同一批元素。对于吸顶📌、进度条和懒加载等需求，优先使用 IntersectionObserver、CSS 粘性定位或单一状态更新🎊，减少手写循环。

用开发者工具定位到底慢在哪里

浏览器中的 overflow 主要负责内容裁剪和滚动范围计算，它并不会自动把所有内容变成独立的高性能图层。容器▶️内部如果存在大量文字、图片、阴影、滤镜💫或复杂 SVG，滚动时仍可能需要反复布局和绘制。

优化 overflow 滚动💫性能时，CSS 的目标是减少可见区域内的布局和绘制工作，同时避免把所有元素都强制提升为独立图层。

处理 overflow动慢最有效的顺序是先💡确认卡顿类型，再用性能工具找出长任务、回流或绘制热点，最后只优化真正占用资源的节点。对于大数据列表，减少渲染量通常比调整单个 overflow 值更有效；对于面板动画，减少布局变化通💎常比强行启用硬件加速更可靠。