函数节流是通过requestanimationframe实现帧同步，匹配屏幕刷新率避免丢帧；滚动回调仅缓存scrolltop和标记raf注册状态，真实逻辑统一在raf中执行；需规避强制同步布局、全量dom更新与复杂计算；动画用transform+will-change硬件加速；监听必须设passive:true。
函数节流不是让滚动“变慢”，而是把密集的 scroll 事件对齐到浏览器的渲染节奏上，确保每次处理都落在帧边界内，从而守住 60FPS。
用 requestAnimationFrame 实现真·帧同步节流
setTimeout 或时间戳硬限 16ms 的节流方式无法适配不同刷新率屏幕（如 90Hz、120Hz），反而会丢帧。requestAnimationFrame（RAF）天然绑定设备 VSync 信号，自动匹配当前屏幕刷新周期。
- 滚动监听回调只做两件事：更新当前 scrollTop 缓存 + 判断是否已注册 RAF
- 用布尔标志（如 isQueued）避免重复注册 RAF，防止回调堆积
- 所有真实逻辑（位置计算、DOM 更新、class 切换）统一放进 RAF 回调里执行
剥离重操作，节流只保节奏，不保轻量
节流解决的是“太密”，不是“太重”。即使加了节流，以下操作仍会直接拖垮帧率，必须移出滚动处理链路：
- 强制同步布局：避免在 RAF 中读取 offsetHeight、getBoundingClientRect() 等触发重排的属性
- 全量 DOM 更新：长列表渲染改用虚拟滚动，只维护可视区 5–10 个节点
- 复杂状态计算：如实时过滤千条数据、格式化大量日期，应移交 Web Worker 或改用防抖后执行
配合硬件加速，让合成不卡主线程
节流+RAF 解决了 JS 执行节奏，但绘制压力还需靠 GPU 分担：
- 需随滚动动画的元素（如吸顶栏、视差层）统一用 transform: translateY() 替代 top 或 margin-top
- 给该元素添加 will-change: transform，提示浏览器提前创建独立图层
- 禁止在节流回调中修改 width、height、left、color 等触发布局或重绘的样式属性
别忘了 passive: true 这个底层开关
现代浏览器对未声明 passive: true 的 scroll/touch 监听器，默认启用同步阻塞机制——哪怕回调里只有一行 console.log，也会打断原生滚动流畅性。
- 添加监听时务必带上 { passive: true } 选项
- 若需在 touchmove 中调用 preventDefault()（如下拉刷新），则改用 { passive: false } 并配合 RAF 节流控制频率
