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
