Improving the performance of JavaScript execution and enhancing the browser frame rate. The functions setTimeout(..., 0) and setTimeout(..., 1) exhibit distinct behaviors

Question

Improving the performance of JavaScript execution and enhancing the browser frame rate. The functions setTimeout(..., 0) and setTimeout(..., 1) exhibit distinct behaviors

Exploring the intricacies of browser rendering mechanics and aiming to optimize various action handling on the same event while understanding how it affects repaints.

Currently, I am attempting to alter the style of a span element (action 1) and perform a more resource-intensive task by incrementing a value in a loop (action 2).

It's puzzling why the change in the span's style is sometimes delayed, especially when the second action is enclosed in a setTimeout function with a 0ms delay.
In contrast, setting the setTimeout delay to 1ms ensures that it does not impede the style change. What causes this difference between delays of 0 and 1?
If we eliminate setTimeout and consolidate all the logic within a promise chain, the span's style change is consistently obstructed. Does this imply that chained microtasks, which operate synchronously, behave akin to a synchronous loop in this scenario? Are they hindering repaints and unsuitable for such optimizations?

P.S. Any recommendations for comprehensive resources addressing optimization of script execution across diverse rendering frames would be greatly appreciated!

document.addEventListener("click", (evt) => {
  if (!evt.target.matches("span")) { return; }
  evt.target.style.color = "red";

  setTimeout(() => {
    const loopTimes = 900000;

    const result = Array(loopTimes)
      .fill()
      .reduce((acc, val, i) => {
        return acc.then((val) => {
          return val + 1;
        });
      }, Promise.resolve(0));

    result.then((endResult) => console.log(endResult));
  }, +evt.target.dataset.timeout);
});

<span data-timeout="0">click for red (0ms)</span><br>
<span data-timeout="1">click for red (1ms)</span>

javascript browser promise settimeout event-loop

Answer 1

Answer №1

This particular behavior is specific to Chrome and seems to have surfaced recently with the implementation of the removal of the default 1ms timeout for setTimeout.
I received a comment related to a "bug" I reported, which explains:

In Chromium's task scheduling, task queues are executed using two methods: PostImmediateTaskImpl and PostDelayedTaskImpl [1], where setTimeout(fn2, 0); in the test case is treated as post immediate task [...]

This change means that setTimeout(fn, 0) now has an ultra high priority and will always be executed before the next animation frame (typically occurring right after a click event due to mouse events being synchronized with screen refresh rate).

Based on your inquiry, it appears you are interested in understanding the rendering process at a higher level.
To summarize, Events (native) are triggered from tasks queued by the event-loop, which selects one to execute during each of its iterations.
Some iterations of this event-loop are special because the monitor sends a V-Sync signal indicating the browser can update data. This is known as a rendering frame.
During a rendering frame, the browser executes specific callbacks (such as animation frames, resize or scroll events, CSS animations, page rendering, etc.). Blocking the event-loop prevents these actions from executing within the rendering frame, causing the browser to wait until the script completes (or potentially terminating it if it takes too long).
Given that the click event occurs close to the next painting frame, a 1ms timeout allows the browser to enter the rendering frame before scripts block it.

Microtasks maintain their own microtask-queue, processed whenever the JS callstack clears, typically following each callback (among other points in the event-loop). Once this queue is emptied, control returns to the event-loop, including any added microtasks since the last visit. Consequently, something like

function lock() { Promise.resolve().then(lock) }

can stall the browser akin to a while(1) {} loop.

It's worth noting that setTimeout is largely independent of the event loop's rendering phase.

To delve into rendering specifics, focus on animation frames by utilizing the requestAnimationFrame() method, scheduling a callback just prior to rendering.

In this scenario, even Chrome's unconventional setTimeout(fn, 0) triggers only after rendering:

document.addEventListener("click", (evt) => {
  // wait for the next animation frame
  requestAnimationFrame(() => {
    if (!evt.target.matches("span")) { return; }
    evt.target.style.color = "red";

    setTimeout(() => {
      const loopTimes = 900000;

      const result = Array(loopTimes)
        .fill()
        .reduce((acc, val, i) => {
          return acc.then((val) => {
            return val + 1;
          });
        }, Promise.resolve(0));

      result.then((endResult) => console.log(endResult));
    }, +evt.target.dataset.timeout);
  });
});

<span data-timeout="0">click for red (0ms)</span><br>
<span data-timeout="1">click for red (1ms)</span>

Answer 2

This particular behavior is specific to Chrome and seems to have surfaced recently with the implementation of the removal of the default 1ms timeout for setTimeout.
I received a comment related to a "bug" I reported, which explains:

In Chromium's task scheduling, task queues are executed using two methods: PostImmediateTaskImpl and PostDelayedTaskImpl [1], where setTimeout(fn2, 0); in the test case is treated as post immediate task [...]

This change means that setTimeout(fn, 0) now has an ultra high priority and will always be executed before the next animation frame (typically occurring right after a click event due to mouse events being synchronized with screen refresh rate).

Based on your inquiry, it appears you are interested in understanding the rendering process at a higher level.
To summarize, Events (native) are triggered from tasks queued by the event-loop, which selects one to execute during each of its iterations.
Some iterations of this event-loop are special because the monitor sends a V-Sync signal indicating the browser can update data. This is known as a rendering frame.
During a rendering frame, the browser executes specific callbacks (such as animation frames, resize or scroll events, CSS animations, page rendering, etc.). Blocking the event-loop prevents these actions from executing within the rendering frame, causing the browser to wait until the script completes (or potentially terminating it if it takes too long).
Given that the click event occurs close to the next painting frame, a 1ms timeout allows the browser to enter the rendering frame before scripts block it.

Microtasks maintain their own microtask-queue, processed whenever the JS callstack clears, typically following each callback (among other points in the event-loop). Once this queue is emptied, control returns to the event-loop, including any added microtasks since the last visit. Consequently, something like

function lock() { Promise.resolve().then(lock) }

can stall the browser akin to a while(1) {} loop.

It's worth noting that setTimeout is largely independent of the event loop's rendering phase.

To delve into rendering specifics, focus on animation frames by utilizing the requestAnimationFrame() method, scheduling a callback just prior to rendering.

In this scenario, even Chrome's unconventional setTimeout(fn, 0) triggers only after rendering:

document.addEventListener("click", (evt) => {
  // wait for the next animation frame
  requestAnimationFrame(() => {
    if (!evt.target.matches("span")) { return; }
    evt.target.style.color = "red";

    setTimeout(() => {
      const loopTimes = 900000;

      const result = Array(loopTimes)
        .fill()
        .reduce((acc, val, i) => {
          return acc.then((val) => {
            return val + 1;
          });
        }, Promise.resolve(0));

      result.then((endResult) => console.log(endResult));
    }, +evt.target.dataset.timeout);
  });
});

<span data-timeout="0">click for red (0ms)</span><br>
<span data-timeout="1">click for red (1ms)</span>

Improving the performance of JavaScript execution and enhancing the browser frame rate. The functions setTimeout(..., 0) and setTimeout(..., 1) exhibit distinct behaviors

Answer №1

Similar questions

Pictures in the portfolio failing to load on Mozilla Firefox

Freezing browser during an active AJAX call

Utilize Vue to access and read a file stored in the current directory

Numerous web worker asynchronous requests are being made, but not all are coming back

Display Fetched Data Using Ajax When Button is Clicked

The recursive function halted its execution following the initial iteration

Encountered an error: [$injector:modulerr] while using AngularJS

It's important to understand how to correctly send state values from a parent component to a child component

Aligning a rotated paragraph in the middle of its parent container

Please input only 0s and 1s into the designated field

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

Creating a real-time clock in a single line console log format using NodeJS

Issue encountered while utilizing Mongoose ArrayFilters for updating a nested subdocument

What steps can I take to enhance the security of my MEAN stack application?

"jQuery's input type property is not functioning properly when attempting to append new

Encountered CSRF validation error while working with a Python Django backend in conjunction with React frontend using Axios for making POST requests

The setTimeout function does not seem to be triggering within Protractor when utilizing JavaScript

The absence of an index signature in GenericType is causing a missing declaration of the expected key/value type in Flow type

Is it feasible to implement hot swapping in Node.js?

Unable to execute commitlint in husky along with a different custom command