如何在高频滚动场景下通过“函数节流 (Throttle)”优化渲染压力并保持 60FPS 的丝滑交互-js教程-PHP中文网

scroll事件滚动卡顿是因为高频触发且回调中含重操作，raf节流可精准对齐帧率，仅在下一帧前执行一次更新，配合transform和虚拟列表进一步优化性能。

如何在高频滚动场景下通过“函数节流 (throttle)”优化渲染压力并保持 60fps 的丝滑交互

scroll 事件为什么一滚就卡？

因为浏览器在快速滚动时，scroll 事件可能每秒触发上百次，而每次回调若包含 DOM 查询、getBoundingClientRect()、样式计算或 innerHTML 更新，就极易超出 16.6ms 的帧预算。更糟的是，传统 setTimeout 节流无法与屏幕刷新同步——它可能在帧中间执行，导致跳帧或重复渲染。

用 `requestAnimationFrame` 实现真·60FPS 节流

这不是“加个定时器”那么简单。requestAnimationFrame（简称 RAF）天然绑定浏览器渲染周期，确保你的处理逻辑只在下一帧绘制前运行一次，且后台标签页自动暂停，不浪费资源。

关键做法是：把实际的业务逻辑（比如计算可视区域、更新 DOM）延迟到 RAF 回调中执行，而 scroll 回调本身只做最轻量的事——记录最新滚动位置并标记“需要更新”：

用一个布尔标志 isQueued 防止重复注册 RAF
scroll 回调里只更新 scrollTop 或 scrollLeft 缓存，并调用 requestAnimationFrame(update)
真正耗时的计算和 DOM 操作全部放在 update 函数里

let isQueued = false;
let currentScrollTop = 0;

function update() {
  isQueued = false;
  // ✅ 这里才做真实工作：计算可视索引、diff 渲染、setTransform 等
  renderVisibleItems(currentScrollTop);
}

window.addEventListener('scroll', () => {
  currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (!isQueued) {
    isQueued = true;
    requestAnimationFrame(update);
  }
});