JavaScript macrotasks and microtasks

Macrotasks and Microtasks

• JavaScript is a single-threaded language (DOM will go crazy if it is multi-threaded)
• Therefore, only one task can be executed at a time , called the main thread, which is used to perform synchronous tasks.
• There are also two task lists for storing asynchronous tasks, macro tasks and micro tasks.
• The execution order is: main thread => microtask => macrotask

About timer

1. The timer module puts it into the macro task queue when the time point arrives
2. If the main thread has no tasks, it will execute them. If it has tasks, it will wait until the execution is completed before continuing.
3. If there are two timers with the same time, the upper one will be executed first and the lower one will be executed later.
4. If two timers have different times, the shorter timer will be executed first and the longer timer will be executed later.

Note:

• The timer's ⏲ is completed in the timer module, and after completion it is the same as a normal asynchronous task.
• In terms of time, due to the long time of the main thread practice, there may be a delay

About Promises

• The constructor of promise is a synchronous task
• The execution order is always: synchronization => microtask => macrotask
• In nested code, there may be synchronization, macrotasks, and microtasks in macrotasks. In this case, put them in the queue/main thread of the next execution to wait for execution.

setTimeout(() => {
    console.log("timer");
    setTimeout(() => {
      console.log("timeout timeout");
    }, 0);
    new Promise(resolve => {
      console.log("settimeout Promise");
      resolve();
    }).then(() => {
      console.log("settimeout then");
    });
  }, 0);
  new Promise(resolve => {
    console.log("Promise");
    resolve();
  }).then(() => {
    console.log("then");
  });
  console.log("ssss");

Execution order: Promise=>ssss=>then=>timer=>settimeout Promise=>settimeout then=>timeout timeout

DOM rendering tasks

Browser rendering: CSS+DOM execution encounters JS and JS is executed first
You can put js as much as possible below: Avoid white screen

Task shared memory

Tasks will not be executed simultaneously, but will be scheduled one by one. They share memory.

Promise microtasks handle complex business

Using promises can turn tasks into asynchronous tasks so that they do not affect the execution of synchronous tasks.

This is the end of this article about JavaScript macro and micro tasks. For more relevant JavaScript macro and micro tasks, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!