为何空页面中requestAnimationFrame回调仍会执行？求技术解析

你核心的困惑点在于：按规范requestAnimationFrame回调需等待**渲染时机（rendering opportunity）**才会执行，但空白页面看似无渲染需求，为何回调仍会触发？以下是具体解释：

1. 浏览器渲染循环并非仅在“有视觉变化”时运行 #

浏览器的渲染循环是一个持续维持的机制，哪怕页面完全空白，前台活跃标签页的浏览器依然会以默认帧率（通常60次/秒）触发渲染周期。这是因为浏览器需要保持对用户交互的响应性——比如随时准备处理点击、键盘输入等操作，渲染循环是浏览器同步脚本状态、响应交互的基础载体。

规范中提到的“渲染时机”，并非只有页面存在视觉元素更新需求时才会触发。浏览器会主动判断是否需要启动渲染任务：只要页面处于前台活跃状态，即使没有视觉变化，浏览器也会定期触发渲染时机，确保脚本逻辑和用户交互能得到及时处理。

2. 递归调用会持续绑定到每个渲染时机 #

你的代码中，每次回调执行时都会再次调用requestAnimationFrame(run)，相当于在每个渲染周期都注册了下一次的回调：

const run = () => {
  requestAnimationFrame((timestamp) => {
    console.log(timestamp);
    requestAnimationFrame(run);
  })
};
run();

只要浏览器持续触发渲染时机，这个递归逻辑就会一直执行，控制台也就会不断打印时间戳。

3. 后台标签页的特殊表现（补充验证） #

如果将页面切换到后台标签，浏览器会降低渲染帧率甚至暂停渲染循环，此时requestAnimationFrame的回调触发频率会大幅降低或直接停止——这也侧面印证了渲染时机与页面活跃状态的强关联。

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