关于requestAnimationFrame执行时机与触发条件的疑问

嘿，我来帮你理清这个误区～

首先你的观察完全没错：只要你像代码里那样持续注册requestAnimationFrame回调，它就会在浏览器的每一个刷新周期里被调用，不管页面有没有发生视觉变化。你之前的误解主要是把两个概念搞混了：

• 资料里说的「requestAnimationFrame在浏览器重绘前运行」是对的，但重绘的触发和requestAnimationFrame的回调触发并不是绑定的因果关系。浏览器的刷新周期是固定的（比如主流的60Hz屏幕就是每16.6ms一次），哪怕页面完全静止，前台状态下的浏览器也会维持这个刷新节奏——requestAnimationFrame的回调就是在这个固定的刷新周期里执行，不管你有没有修改视图。
• 你代码里的逻辑是：每次step执行时，都主动调用window.requestAnimationFrame(step)，相当于一直在给浏览器“预约”下一次刷新的回调名额。所以不管你有没有改变页面内容，浏览器都会在每个刷新周期执行这个回调，自然console.log("aaa")会一直打印。
• 至于浏览器是否会重绘，那是在requestAnimationFrame回调执行之后才会判断的：如果回调里的代码修改了DOM的样式、布局等会影响视觉的内容，浏览器就会进行重绘；如果回调里只是做了日志打印这种不影响视图的操作，浏览器可能会跳过重绘，但回调本身还是会按时执行。

举个简单的对比：如果把你的代码改成只注册一次requestAnimationFrame(step)，那它只会执行一次；但你在回调里又重复注册，就形成了一个持续的循环，绑定了每一次刷新周期。

你的测试代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="some">aaa</div>
  </body>
  <script>
    function step(timeStamp) {
      console.log("aaa"); // gets printed every frame
      window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
  </script>
</html>

备注：内容来源于stack exchange，提问作者ryan