滚动优化核心是避免强制重排：优先用transform/opacity动画，集中读写操作，用IntersectionObserver/ResizeObserver替代轮询，合理使用will-change或translateZ(0)提升图层。

滚动时避免大规模重排，关键在于切断“读—写”混杂的样式操作链，让浏览器渲染流水线不被强制打断。

只用可合成属性做动画

动效中优先使用 transform 和 opacity。这两个属性不会触发布局（reflow）或重绘（repaint），浏览器会把它们交给合成器（compositor）在独立图层处理，GPU 加速生效。比如用 transform: translateY(-50px) 替代 top: -50px，用 opacity: 0.8 替代 visibility: hidden 或颜色叠加模拟透明。

杜绝强制同步布局（Forced Synchronous Layout）

这是滚动卡顿最常被忽视的根源：在修改样式后立刻读取布局信息，例如：

• 设置 element.style.transform = 'translateY(10px)' 后马上调用 element.getBoundingClientRect()
• 在滚动监听里反复查 offsetTop、scrollHeight 或 getComputedStyle(el).height

这类操作会迫使浏览器立刻执行完整重排，打断当前帧渲染。解决办法是：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 把所有“读取布局”的操作集中放在一帧开头（如 requestAnimationFrame 回调最开始）
• 把所有“写入样式”的操作集中放在一帧结尾
• 对多次用到的尺寸值，只读一次并缓存，不要在循环或高频回调里重复调用

用现代观察者替代手动轮询

别在 scroll 事件里反复查元素位置或尺寸：

• 用 IntersectionObserver 检测元素是否进入视口，触发动效——它异步执行，不阻塞主线程
• 用 ResizeObserver 监听容器尺寸变化，代替 window.resize + 手动查宽高
• 需要精确滚动进度时，用 getScrollInfo 类工具一次性获取，而非每帧都算

控制动效层级与硬件加速

给将要动画的元素主动提升为合成层，但不过度滥用：

• 加 will-change: transform（仅在动效前几帧设置，动效结束及时移除）
• 或用 transform: translateZ(0) 强制创建新图层（兼容性更好，但不如 will-change 精准）
• 避开 filter（如 blur()）、box-shadow 等高开销合成属性，尤其在滚动区域