React实现的滚动动画出现闪烁 如何优化提升运行流畅度

1. 避免在滚动事件回调中触发重排重绘 #

你当前大概率是直接在scroll事件回调中修改DOM的高度、偏移量等会触发重排重绘的属性，而scroll事件每秒最高可触发60次以上，移动端滚动线程和主线程的调度优先级差异会进一步放大该问题，导致闪烁。
优化方式：

• 用transform代替直接修改height/top等属性：transform走GPU合成线程，不会触发重排重绘。你可以给时间轴填充条设置transform-origin: top，之后通过transform: scaleY(进度值)控制填充状态，视觉效果和修改高度完全一致，性能提升非常明显。
• 给动画元素开启硬件加速：仅给实际执行动画的时间轴填充元素添加CSS属性will-change: transform，提前告知浏览器该元素需要执行动画，预留GPU资源，不要给大量元素加该属性避免资源浪费。

2. 做滚动事件的节流处理 #

scroll事件触发频率远高于屏幕刷新率，不需要每次触发都更新动画状态，用节流函数把更新频率限制在和屏幕刷新率一致即可，也就是每16ms最多执行一次更新。
示例节流代码：

function throttle(func, delay = 16) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  }
}
// 绑定滚动事件时使用
window.addEventListener('scroll', throttle(updateTimelineProgress))

3. 用requestAnimationFrame接管动画更新 #

所有和视图更新相关的操作都放到requestAnimationFrame回调里执行，保证更新时机和浏览器的渲染周期对齐，避免掉帧：

function updateTimelineProgress() {
  requestAnimationFrame(() => {
    // 计算进度、更新transform的逻辑写在这里
  })
}

4. 避免CSS transition和JS控制的动画冲突 #

你之前加transition没用甚至更卡的原因是：JS滚动事件频繁修改属性，transition会每次都生成过渡动画，反而导致属性更新和过渡冲突出现闪烁。如果是用JS实时控制进度的场景，不需要加transition，直接用上面的transform+requestAnimationFrame的方案就够了。如果确实需要滚动停止后的收尾过渡，可以判断滚动停止后再给元素加transition属性，滚动过程中移除。

5. 移动端专属优化 #

移动端的滚动有默认的弹性效果，而且scroll事件在滚动惯性阶段的触发频率可能不稳定，可以用IntersectionObserver来监听时间轴节点进入视口的状态，代替自己计算滚动位置算进度，误差更小，性能也更高，因为IntersectionObserver是浏览器原生优化过的API，不会占用主线程太多资源。

内容的提问来源于stack exchange，提问作者equalsound