requestAnimationFrame实现的滚动表头背景过渡在标签页失活时未暂停问题

问题原因分析 #

• 你当前实现里requestAnimationFrame的作用仅为滚动事件节流，并没有用来实现逐帧的背景色过渡动画：你在doSomething中是直接给header的背景色属性赋值，属于瞬时状态切换，不存在需要逐帧执行的JS动画逻辑。
• 你观察到的背景色渐变效果是CSS transition属性控制的，该类CSS动画由浏览器内核独立调度，和JS侧requestAnimationFrame的回调暂停逻辑无关，所以标签页失活时不会同步暂停。

优化方案 #

如果你需要在标签页非激活时停止所有相关动画节省资源，可以监听visibilitychange事件手动控制：

document.addEventListener('visibilitychange', () => {
  const header = $('header')
  if (document.hidden) {
    // 页面隐藏时暂停过渡
    header.style.transition = 'none'
  } else {
    // 页面显示时恢复过渡
    header.style.transition = ''
  }
})

如果你的过渡逻辑本身就是瞬时切换没有渐变，那你当前的实现已经是优化后的状态，requestAnimationFrame的节流逻辑已经避免了滚动时的高频重绘，不需要额外调整。

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