A brief discussion on macrotasks and microtasks in js

Here is a question about macrotasks and microtasks:

setTimeout(function(){
  console.log('1')
});
 
new Promise(function(resolve){
  console.log('2');
     resolve();
}).then(function(){
 console.log('3')
});
 
console.log('4')

What is the execution order of the above code?

Some friends may answer: 2, 4, 1, 3

I guess the thinking is: Don’t I know that js is executed line by line? setTimeout is asynchronous, so it is put at the end. Going down, console.log(2) is executed. .then() is asynchronous, so it is put at the end. Then console.log(4); Then go to the asynchronous queue, first console.log(1); then console.log(3) .

I was a little panicked, so I pasted it into the browser to take a look:

Unbelievable

Confused, I can only study the operating mechanism of JavaScript carefully!

1. About JavaScript

JavaScript is a single-threaded language, which means that it can only complete one task at a time. If there are multiple tasks to be executed, they must be queued and executed according to the queue (the previous task is completed before the next task is executed).

2. JavaScript Event Loop

Since js is single-threaded, it is like a cafeteria with only one window. Students need to line up to get their meals one by one. Similarly, js tasks must also be executed one by one in sequence. This mode is simple to execute, but as future demands, transactions, and requests increase, the execution efficiency of this single-threaded mode will inevitably be low. As long as one task takes a long time to execute, the subsequent tasks cannot be executed during this time.

It is common that high-definition pictures included in news load very slowly. Should our webpage be stuck until the pictures are fully displayed? To solve this problem, the JavaScript language divides task execution modes into synchronous and asynchronous:

• Synchronous mode: This is the execution mode mentioned above. The latter task waits for the previous task to end before executing. The execution order of the program is consistent and synchronized with the order in which the tasks are arranged.
• Asynchronous mode: Each task has one or more callback functions. After the previous task is completed, the callback function is executed instead of the next task. The next task is executed without waiting for the previous task to be completed. Therefore, the execution order of the program is inconsistent with the order of task arrangement and is asynchronous.

If we express the content of the map in words:

• Synchronous and asynchronous tasks enter different execution "places" respectively. Synchronous tasks enter the main thread, while asynchronous tasks enter Event Table and register functions.
• When the specified thing is completed, Event Table will move this function into Event Queue .
• When the task in the main thread is completed and is empty, it will go to Event Queue to read the corresponding function and enter the main thread for execution.
• The above process will be repeated continuously, which is often called Event Loop .
  

With code expression:

let data = [];
$.ajax({
    url:blog.csdn.net,
    data:data,
    success:() => {
        console.log('Sent successfully!');
    }
})
console.log('Code execution ended');

The above is a simple ajax request code:

• ajax enters Event Table and registers the callback function success .
• Execute console.log ('Code execution ended').
• The ajax event is completed and the callback function success enters Event Queue .
• The main thread reads the callback function success from Event Queue and executes it.

I believe that through the above text and code, you have a preliminary understanding of the execution order of js. However, this is also the reason why some friends answered 2, 4, 1, 3.

However, in fact, there are still tricks in the asynchronous queue. In our interview question, setTimeout and promise 's .then() are both in the asynchronous queue! Next, let’s talk about those techniques (macrotasks and microtasks).

3. Macrotasks and microtasks

Everyone understands it differently, because macrotasks and microtasks are not standard, but the order of execution is unified in js.

Macro Tasks:

Microtasks:

Macro tasks include : <script> overall code, setTimeout , setInterval , setImmediate , Ajax , DOM events
Microtasks : process.nextTick , MutationObserver , Promise.then catch finally

process.nextTick varies too much, different nodes are not executed uniformly, and there is no standard
Microtasks are executed earlier than macrotasks

Tip: Some people like to put the entire <script> code in a macro task, but I personally don’t like it. In my case, it is just the main thread of execution. I personally classify both macro tasks and micro tasks into asynchronous tasks!

Let’s look at the interview question again:

//Callback is an asynchronous task setTimeout(function(){//macro task console.log('1')
});
 
new Promise(function(resolve){
  console.log('2');//Synchronize main thread resolve();
}).then(function(){//microtask console.log('3')
});
 
console.log('4') //Synchronize main thread

2: The first one in synchronization, so the first

4: The second one in synchronization, so the second

3: Microtasks in asynchronous

1: Macro task in asynchronous, so the second

Therefore: the results are 2, 4, 3, 1!

In addition, let’s expand on this:

setTimeout(() => {//Macro task queue 1
  console.log('1'); //Macro task team 1 task 1

  setTimeout(() => {//Macro task queue 3 (macro task in macro task queue 1)
    console.log('2')
  }, 0)

  new Promise(resolve => {
    resolve()
    console.log('3') //Macro task queue 1 task 2
  }).then(() => {//Microtask in macrotask queue 1 console.log('4')
  })

}, 0)
 
setTimeout(() => {//Macro task queue 2
  console.log('5')
}, 0)

console.log('6') //Synchronize the main thread

Execute the whole code (macro task) console.log('6') >> Macro task queue 1 and macro task queue 2 are asynchronous (executed in sequence)

Macrotask queue 1: =>

console.log('1')

console.log('3')

console.log('4') //Microtask in macrotask

The rest will not be executed first, because it is a macro task in a macro task (console.log(2)) and will be thrown into the task queue later.

Macro task queue 2: =>

console.log('5')

Macrotask 3 in macrotask queue 1: =>

console.log('2')

What will the above code output?

4. Expand macrotasks and microtasks

The above question is complicated. You may want to think about it. How should we execute it one by one in this complicated situation?

• 6: The first synchronization main thread, so the first
  

There is no microtask in the script code, so the macrotask is executed directly =>

Macrotask Queue:

  Macrotask Queue 1

• Task 1: console.log(1)
• Task 2: console.log(3)
• Microtask in macrotask queue 1: console.log(4)
• Macro task queue 3: Because it is a macro task in macro task queue 1, it is thrown into the task queue at the end. We first check whether there are macro tasks at the same level as macro task queue 1. If there are, we will execute the macro tasks at the same level first. If not, we can execute macro task queue 3! So finally!

Macrotask Queue 2

console.log(5)

So what is the output? It’s 6, 1, 3, 4, 5, 2!

After verification, the result is correct!

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