raf节流更丝滑是因为其与浏览器渲染节奏对齐，天然匹配60hz刷新率，避免强制重排和掉帧。它通过pending标记确保单帧最多执行一次，由gpu合成器调度实现硬件加速级流畅体验。

节流用 requestAnimationFrame（rAF）实现，核心是把高频回调“挂”在浏览器下一帧渲染前执行，避开重复触发、避免强制同步布局，从而获得硬件加速级的流畅体验。这不是简单替换 setTimeout，而是让节流逻辑与浏览器渲染节奏对齐。

rAF 节流为什么更丝滑？

传统节流（如基于时间间隔的 setTimeout 或 setInterval）容易和渲染管线脱节：可能在帧中段触发、引发 layout thrashing（强制重排）、甚至导致掉帧。而 requestAnimationFrame 由浏览器调度，天然对齐屏幕刷新率（通常是 60Hz），且被浏览器优化为“只在需要渲染时才调用”，GPU 合成器能直接参与调度——这才是所谓“硬件级丝滑”的底层支撑。

基础 rAF 节流器（rAFThrottle）写法

关键在于“单帧最多执行一次”，且保证函数在渲染前运行（避免样式读写分离导致的 layout 泪滴）：

FastAPI Flask Proxy

FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。

下载

• 用一个布尔标记（pending）控制是否已有待执行任务
• 每次触发时，若未 pending，则注册 rAF；rAF 回调中执行业务逻辑并重置标记
• 不依赖时间戳或计时器，完全由渲染帧驱动

示例代码：

function rAFThrottle(fn) {
  let pending = false;
  return function(...args) {
    if (!pending) {
      pending = true;
      requestAnimationFrame(() => {
        fn.apply(this, args);
        pending = false;
      });
    }
  };
}

进阶：支持取消、立即执行与上下文绑定

生产环境常需更健壮的版本：

• 暴露 cancel 方法，用于清理待执行任务（比如组件卸载时）
• 提供 flush 接口，强制立即执行（适用于 scroll 到底等必须兜底的场景）
• 自动绑定 this 和参数，避免箭头函数丢失上下文
• 可选：加入空闲回调（requestIdleCallback 回退），兼顾低优先级任务

典型适用场景 & 注意事项

rAF 节流最适合对视觉反馈敏感、高频触发的场景：

• 滚动监听（scroll、resize）——尤其配合 sticky、视差、懒加载
• 鼠标移动追踪（如拖拽、画布绘图）——避免 input event 堆积
• Canvas 动画控制、WebGL 渲染调度

注意：
- 不适合对时间精度要求极高的逻辑（如音频同步），rAF 本身有调度延迟
- 避免在 rAF 回调里读写交替操作 DOM 样式（如先 offsetTop 再 style.left），仍可能触发重排
- 移动端要注意部分 WebView 对 rAF 支持不稳定，可加降级 fallback