title: When will requestAnimationFrame be executed?
body: <p>Browser reads and runs a JavaScript file, the synchronous tasks written in the file immediately become in-mid-execution task, setTimeout callbacks become macrotasks, and promise callbacks become microtasks. Everything is good.</p>
  
  <p>I thought I mastered the JavaScript Event Loop until I met <code>requestAnimationFrame</code>.</p>
  
  <p>@T.J. Crowder provided me with the following code snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const messages = [];
  setTimeout(() =&gt; {
    // Schedule a microtask
    Promise.resolve().then(() =&gt; {
      log("microtask");
    });
    
    // Schedule animation frame callback
    requestAnimationFrame(() =&gt; {
      log("requestAnimationFrame");
    });
    
    // Schedule a macrotask
    setTimeout(() =&gt; {
      log("macrotask");
    }, 0);
    
    // Schedule a callback to dump the messages
    setTimeout(() =&gt; {
      messages.forEach(msg =&gt; {
        console.log(msg);
      });
    }, 200);
  
    // Busy-wait for a 10th of a second; the browser will be eager to repaint when this task completes
    const stop = Date.now() + 100;
    while (Date.now() &lt; stop) {
    }
    
  }, 100);
  
  function log(msg) {
    messages.push(Date.now() + ": " + msg);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>Chrome: microtask, requestAnimationFrame, macrotask</li>
  <li>Firefox: microtask, macrotask, requestAnimationFrame</li>
  </ul>
  
  <p>The spec doesn't say whether that can happen between the completion of a macrotask and the processing of its scheduled microtasks, or only between macrotasks. So presumably that can vary browser to browser.</p>
  
  <p>But in both Chrome and Firefox, microtasks are always executed before <code>requestAnimationFrame</code> callbacks. My questions below are based on this observation.</p>
  
  <hr>
  
  <p>**Q1: **</p>
  
  <p>Even though the browser has no repaint work, will the requestAnimationFrame's callback be executed at the refresh rate (default 60 per second)?</p>
  
  <hr>
  
  <p>**Q2: **</p>
  
  <p>Below is from <a href="https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers" rel="noreferrer">https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers</a></p>
  
  <blockquote>
    <p>The only way to guarantee that your JavaScript will run at the start of a frame is to use <code>requestAnimationFrame</code>.</p>
  </blockquote>
  
  <p>Too heavy in-mid-execution task will lag the browser, cause the frame interval exceed 16.66ms, block frames from completing. </p>
  
  <p>Does the word 'guarantee' mean that the microtasks will be in-mid-execution immediately the current JS stack becomes empty, hence block the current frame from completing (if the microtask is also too heavy)?</p>