requestAnimationFrame 设置帧率

`requestAnimationFrame` 是一个用于控制 Web3D 渲染帧率的关键 API，它允许开发者以浏览器的帧速率来执行操作，通常不会超过浏览器硬件能够达到的最高速度（如165Hz）。这对于创建平滑流畅的动画和交互式内容至关重要。

### `requestAnimationFrame` 的基本用法

#### 定义与作用
`requestAnimationFrame` 接受一个函数作为参数，该函数将在下一次重绘之前被调用。这个API通过浏览器内部机制来管理调用时机，因此可以有效避免不必要的 CPU 和 GPU 负载。

#### 参数
- **回调函数** (`callback`)：这是您希望在下一帧绘制时执行的函数。这个函数通常负责更新视图或动画状态。

#### 返回值
`requestAnimationFrame` 返回一个整数值，表示当前正在等待执行的动画请求的 ID。这个 ID 可以用来取消特定的请求（更多细节见下方）。

#### 使用示例
假设我们想要实现一个简单的动画循环，可以通过以下方式设置帧率：

let animationId;
function animate(timeStamp) {
    // 更新动画状态，例如改变元素的位置或大小
    let x = Math.sin(timeStamp / 100) * 100;

    // 更新 DOM 或其他渲染逻辑
    document.getElementById('myElement').style.left = `${x}px`;

    // 请求下一个帧
    animationId = requestAnimationFrame(animate);
}

// 初始化动画
animate();

### 控制帧率的方法

#### 默认帧率
`requestAnimationFrame` 自动基于浏览器的刷新率工作，这意味着它的性能依赖于用户的显示器刷新率。对于常见的 60Hz 显示器来说，每次重绘间隔大约是 16.6ms。

#### 手动控制帧率
若要手动调整帧率，可以利用定时器（如 `setTimeout`）结合计算来模拟 `requestAnimationFrame` 的行为。这种方法可能导致更频繁的调用，从而可能降低整体性能并增加延迟。下面是一个示例：

let frameCount = 0;
const targetFrameRate = 60; // 每秒期望帧数
const oneSecondInMs = 1000;
const delayPerFrame = oneSecondInMs / targetFrameRate;

function animate(time) {
    frameCount++;
    const elapsedTime = time - startTime;
    
    // 如果已经过了一个完整的帧周期，则继续
    if (elapsedTime >= delayPerFrame) {
        // 更新动画状态
        // ...

        // 继续到下一次帧
        setTimeout(() => {
            requestAnimationFrame(animate);
        }, delayPerFrame);
    }
}

// 启动动画
startTime = Date.now();
animate(Date.now());

### 总结与注意事项

1. **性能优化**：虽然手动控制帧率能提供更多灵活性，但在大多数情况下，依赖浏览器的自动管理功能更为高效且不易引起性能问题。
2. **内存管理**：频繁的请求和释放资源可能会导致内存泄漏，尤其是在长时间运行的应用程序中。
3. **兼容性**：尽管现代浏览器普遍支持 `requestAnimationFrame`，但在一些旧版本或特定环境下可能存在差异或限制。

### 相关问题：
1. 如何检测和报告 `requestAnimationFrame` 的性能瓶颈？
2. 是否存在替代 `requestAnimationFrame` 来控制渲染帧率的技术或库？
3. 当多个动画并存时，如何合理分配帧率以保证流畅性和效率？