What is?

Each render process in the browser has a main thread, which is very busy handling the DOM, computing CSS, computing layouts, executing JS code, responding to mouse and keyboard input events, and so on. To keep so many different types of tasks in order, you need a task management system, and this task management system isEvent loop system.

How to perform the task?

Common macro tasks

Common macro tasks fall into two categories:

  1. Delay tasks, such as timers
  2. Asynchronous callback tasks, such as input events such as clicks, scrolls, keystrokes, Ajax requests, etc

Delay tasks are different from asynchronous callback tasks

  • Deferred tasks mainly refer to timer tasks, including some deferred tasks of the browser. This kind of task is generally sensitive to execution time. If it is simply thrown into the task queue, it is likely to have problems when it is executed. So in addition to the basic task queue, there is also a delayed task queue. After the execution of the current macro task, the main thread does not immediately execute the next macro task. Instead, it checks whether there are expired tasks in the deferred task queue and executes them all. The ID returned by the timer is the unique identifier of the task in the delay task queue. If the delay task needs to be cancelled, the task with the corresponding ID needs to be removed from the delay task queue. Of course, even with this design, executing code that blocks the main thread for a long period of time before a delayed task can be delayed if the previous macro task is too long.
  • Asynchronous callback tasks refer to Ajax requests, event responses, etc. When we send an Ajax request and set the callback function, the following steps occur:
    1. The renderer tells the network process to request the resource
    2. The renderer task continues
    3. When the request ends, the network process tells the renderer the result of the request via IPC
    4. The renderer loads the IO process to encapsulate the result as a task and put it into a task queue
    5. The main thread is removed and the asynchronous callback task is executed

Asynchronous callback and synchronous callback

A synchronous callback is a callback that completes within the body of the main function, for example:

function foo(cb) {
  console.log('start')
  cb();
  console.log('end')}The callback is executed in the body of the main function
function _sync() {
  console.log(2333)}// async callback. The callback completes outside the main function
function _async() {
  setTimeout(function () {
    console.log(2333)},100)}// start
/ / 2333
// end
foo(_sync)

// start
// end
/ / 2333
foo(_async)
Copy the code

Common microtasks

  • Mutation Observer
  • Promise

The relationship between macro tasks and micro tasks

Each macro task maintains a microtask queue. After the macro task code is executed, it does not immediately exit the main thread. Instead, it checks whether its microtask queue is empty. If a new microtask is created during this process, it continues until it is emptied.

Why are we doing this?

In order to ensure the timeliness of asynchronous task execution, it may be affected if the task is inserted into the macro task queue