requestanimationframe太多

### 如何优化频繁调用 `requestAnimationFrame` 方法

当处理动画或需要高频率更新界面的任务时，可能会遇到因过度调用 `requestAnimationFrame` 而引起的性能问题。为了提高效率并保持良好的用户体验，可以通过几种策略来优化这种情形。

#### 减少不必要的帧请求

确保只在确实需要刷新视图的情况下才发起新的帧请求。对于那些不需要每帧都重新计算的位置或其他属性，应该缓存其值而不是每次都将它们传递给回调函数[^1]。

let animationFrameId;
function animate() {
    // 执行必要的绘制逻辑...
    
    // 如果条件满足，则继续下一帧
    if (shouldContinueAnimating()) {
        animationFrameId = requestAnimationFrame(animate);
    }
}

// 开始动画
animationFrameId = requestAnimationFrame(animate);

// 停止动画
cancelAnimationFrame(animationFrameId);

通过这种方式，在不再需要进一步更新时取消未来的帧请求，从而避免浪费资源。

#### 合理利用节流与防抖技术

针对某些特定事件触发的高频次操作（如窗口调整大小、鼠标移动），可采用节流(throttle) 或者防抖(debounce)[^3] 技术限制这些动作对 `requestAnimationFrame` 的调用频度。这有助于防止由于用户交互引发过多无意义的重绘过程。

- **节流**：限定在一个固定的时间间隔内最多执行一次任务；
- **防抖**：等待一定延迟后再真正执行任务，期间如果有新事件发生则重置计时器。

#### 组合多个变更到单个帧中

如果存在多处地方分别独立地调用了 `requestAnimationFrame` ，那么应当考虑将这些更改集中起来一次性提交给浏览器去处理。这样做的好处是可以显著降低布局和样式解析的成本，因为浏览器不必反复为每一个单独的变化做准备[^4]。

const pendingChanges = [];
let isScheduled = false;

function scheduleUpdate(change) {
    pendingChanges.push(change);
    if (!isScheduled) {
        isScheduled = true;
        requestAnimationFrame(flushPendingChanges);
    }
}

function flushPendingChanges() {
    while(pendingChanges.length){
        const change = pendingChanges.shift();
        applyChange(change); // 应用实际变化
    }
    isScheduled = false;
}

上述代码展示了如何收集待处理的变动，并且仅当没有已经安排好的帧时才会创建一个新的帧请求。一旦到了适当时候就会批量应用所有的改动。