如何查看浏览器会话中所有requestAnimationFrame请求实体列表？

好问题！我特意核对了相关的浏览器API规范和实际实现情况，很遗憾的是：目前并没有原生的浏览器API可以直接查看当前会话中所有待执行的requestAnimationFrame请求实体。

为什么没有原生方法？ #

requestAnimationFrame的设计初衷是为浏览器提供高效的帧渲染调度能力，这些请求的内部管理状态属于浏览器渲染引擎的私有范畴，浏览器并没有把这部分信息暴露给前端开发者。毕竟从性能和安全角度考虑，过多暴露内部调度细节也没有必要。

可行的替代方案：自行维护请求ID列表 #

你提到的“将每个ID存入数组跟踪”确实是目前唯一靠谱的解决方案，而且可以通过封装原生API来自动化这个过程，不用每次手动记录。举个简单的封装例子：

// 用Set来存储活跃的requestAnimationFrame ID（自动去重，操作更高效）
const activeRAFIds = new Set();

// 封装requestAnimationFrame，自动记录ID
function trackedRAF(callback) {
  const rafId = requestAnimationFrame((timestamp) => {
    // 回调执行后，从集合中移除该ID（因为请求已经完成）
    activeRAFIds.delete(rafId);
    callback(timestamp);
  });
  activeRAFIds.add(rafId);
  return rafId;
}

// 封装cancelAnimationFrame，同步移除ID
function trackedCancelRAF(rafId) {
  cancelAnimationFrame(rafId);
  activeRAFIds.delete(rafId);
}

之后你只需要用trackedRAF和trackedCancelRAF替代原生方法，就可以随时通过activeRAFIds查看当前所有活跃的请求ID了。

补充：Three.js场景的特殊情况 #

像你提到的Three.js里常见的递归调用写法：

function animate() { 
  requestAnimationFrame(animate);
  // 渲染逻辑...
} 
requestAnimationFrame(animate);

这种模式下，每次animate回调执行时才会发起下一次请求，所以同一时间其实只有一个活跃的requestAnimationFrame请求。这种场景下维护列表的成本极低，甚至你只需要记录最后一个ID就足够了。

开发者工具的间接观察方式 #

虽然不能直接查看请求列表，但你可以通过浏览器的Performance面板来间接观察：录制一段页面的帧渲染过程后，在Timeline里可以看到requestAnimationFrame回调的执行时机和调用栈，这对于调试帧渲染问题也很有帮助。

内容的提问来源于stack exchange，提问作者Chris Schmitz