This is the 21st day of my participation in the August Text Challenge.More challenges in August

Event loop

First of all, is the main thread of the browser page rendering process will usually perform many tasks, such as rendering, JavaScript, DOM node task execution and etc., these tasks are due to the users interact with the page, if you cannot arrange orderly, then the page display effect may be related to the user the desired effect can produce out, Therefore, an event scheduling system is needed to manage the execution of these tasks. In this the browser has a main thread that renders page elements as the process that handles page redraw, backflow, and other design element style operations. There will also be a task queue to manage tasks retrieved from javaScript, such as keystroke operations, scroll operations for Windows, communication with remote servers, and so on. This is the EventLoop of the js execution context.

EventLoop task classification

Js EventLoop typically has two types of tasks: macro tasks and micro tasks. Microtasks are stored in the micro Task Queue, which is used to store tasks that need to be processed first, such as Promise tasks and Mutation Observer tasks. When macro tasks such as SetTimeout and setInterval are generated, they will be put into the macro task queue for execution. However, before each macro task is executed, the current microtask queue will be detected. If there are any microtasks, the microtasks in the microtask queue will be cleared first before the macro task is executed.

setTimeout(() = >{
    console.log(1)})Promise.resolve(2).then((v) = >{
    console.log(v)
})
setTimeout(Promise.resolve(3).then(v= >console.log(v)))
/ / 2
/ / 3
/ / 1
Copy the code

However, v8’s scheduling strategy for macro tasks cannot meet the demand for high time accuracy, because

  • JavaScriptYou cannot know exactly where a task is in the message queue, and therefore cannot accurately control the execution time of the task.
  • inJavaScriptBetween the added tasks, other system-scheduled tasks may be added to the message queue.

XMLHttpRequest

XMLHttpRequest is a special Api that can be used by:

let xhr = new XMLHttpRequest()
xhr.xxxx()
...
Copy the code

This is often referred to as the heart of Ajax requests, which are handled as macro tasks in the browser’s scheduling process. Imagine if a network request is slow, the request is executed asynchronously as a callback to the macro task and then waits for completion.

requestAnimationIframe

RequestAnimationFrame () tells the browser that you want to execute an animation and asks the browser to call the specified callback to update the animation before the next redraw. This method takes as an argument a callback function that is executed before the browser’s next redraw.

RequestAnimationFrame is a special API that is used to render animations for certain scenes. How is it scheduled by the browser? Assign about three-quarters of the priority to callback events such as mouse and keyboard, ensuring that user input gets the highest priority response, and give the rest of the priority to other tasks and ensure that they get executed. Since the requestAnimationFrame task needs to be executed before the next redraw, should it be executed at a microtask priority? The answer is: No. Because if it is executed as a microtask, it also needs to be executed at such a high priority that some asynchronous operations may be lost and UI updates may be inconsistent, and it is not executed strictly in the order of macro tasks, it is executed strictly before each redraw according to the browser frame rate.

requestIdleCallback

Window. RequestIdleCallback () method will be called function in browser free time line. This enables developers to perform background and low-priority work on the main event loop without affecting the delay of critical events such as animations and input responses. Functions are typically executed in first-come-first-called order; however, if a callback function specifies a timeout, it is possible to scramble the order of execution in order to execute the function before it times out.

The REACT API is still experimental, but it provides a new approach to react task scheduling. It is designed to allow the browser to perform render operations smoothly, allowing control to shift between the browser and the user, ensuring that it responds to user operations without blocking other render tasks.

Reference:

  • What you don’t know about EventLoop and browser rendering, frame animation, idle callbacks
  • requestIdleCallback MDN
  • requestAnimationFrame MDN