Shulou(Shulou.com)06/01 Report--

This article mainly explains "case analysis of Microtask and Macrotask in Javascript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "case analysis of Microtask and Macrotask in Javascript".

First of all, let's look at a question, the following javascript code, what will be printed on the console after execution?

Async function async1 () {console.log ('async1 start'); await async2 (); console.log (' async1 end');} async function async2 () {console.log ('async2 start'); return new Promise ((resolve, reject) = > {resolve (); console.log (' async2 promise');})} console.log ('script start'); setTimeout (function () {console.log (' setTimeout');}, 0); async1 () New Promise (function (resolve) {console.log ('promise1'); resolve ();}). Then (function () {console.log (' promise2');}). Then (function () {console.log ('promise3');}); console.log (' script end')

To be honest, there are very few front-end engineers who can really answer this question correctly in the interview. Let's take a look at the answer first. Save the above code in the test.js file and execute it with node. The result is as follows:

If you paste the above code into the script tag in a web page, then open the web page, and then open the console, you can see the following output (Chrome 64-bit 63.0.3239.84):

The results are exactly the same as those printed by node. So why this order?

We all know the single-threaded nature of js (excluding html5's web worker) and good asynchronous support. Under the premise of a single thread, when the asynchronous task starts to be executed, there are actually two queues to manage, namely, Macrotask and Microtask (there is only an one-letter difference, don't admit your mistake. ). In the currently executing thread, if it encounters an asynchronous task belonging to Macrotask, it is put into the Macrotask queue; the asynchronous task that encounters Microtask is put into the Microtask queue. Note that the task is just queued here and will not be executed. After the execution of the current main thread task is completed, the task will be fetched from the Microtask queue in turn, and the principle of putting the asynchronous task into the corresponding queue will be followed during execution. Wait until all the Microtask tasks have been executed, and then take a task out of the Macrotask queue for execution.

The tasks that belong to Macrotask are:

SetTimeout,setInteveral,script tag, Iphazo UI rendering

The tasks that belong to Microtask are:

Promise,async/await,process.nextTick,Object.observe,MutationObserver

(in fact, even if it is the same Microtask, there are differences in priority internally. For example, in the implementation of NodeJS, process.nextTick is executed before Promise. For related questions, take a look at this link: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/. Anyway, I gave up when I saw it halfway. Fortunately, there is no priority difference between async/await and Promise)

Then let's analyze the order of execution in this question:

[1] Line 15 executes, printing out script start

[2] Lines 16 to 18, put the callback task into Macrotask (currently Macrotask: line 16 setTimeout,Microtask: empty)

[3] Line 20, execute the async1 function, and print out the async1 start of line 2 first

[4] the async2 on line 3 is executed first, and the async2 start of line 8 is printed

[5] if you encounter Promise on lines 9 to 12, print out the async2 promise of line 11 first (note that no matter where your resolve is written in the function of new Promise, it's the same as the last sentence! )

[6] the async2 in line 3 returns Promise, and the async2 is preceded by await decoration, so the task on the next line 4 is placed in Microtask (currently Macrotask: line 16 setTimeout,Microtask: line 4)

[7] Lines 22 to 25, print out promise1, and put line 26 in Microtask, notice that line 28 hasn't been executed yet, so nothing is done on this line (currently Macrotask: line 16 setTimeout,Microtask: line 4, line 26)

[8] Line 30 prints script end (currently Macrotask: line 16 setTimeout,Microtask: line 4, line 26)

[9] after the execution of the main thread of the script ends, now take out a Microtask, line 4, and print async1 end (currently Macrotask: line 16 setTimeout,Microtask: line 26)

[10] take out another Microtask, line 26, and print promise2. Since line 26 is followed by then, line 28 is inserted into Microtask (currently Macrotask: line 16 setTimeout,Microtask: line 28)

[11] take out another Microtask, line 28, and print promise3 (currently Macrotask: setTimeout,Microtask: blank on line 16)

[12] Microtask is gone, execute the next Macrotask, that is, setTimeout on line 16, print setTimeout, end

It is important to note that the effects of the following two ways of writing are exactly the same (the position of the resolve does not matter):

1:new Promise ((resolve, reject) = > {console.log ('1111'); resolve (); console.log (' 2222');}); 2:new Promise ((resolve, reject) = > {console.log ('1111'); console.log (' 2222'); resolve ();})

In addition, for chained calls to Promise, such as new Promise (....). Then (...). Then (...), only the contents of the first then are put into the Microtask at a time, and when the first then is executed, the second then is put into the Microtask instead of both then at a time.

Thank you for your reading, the above is the content of "case Analysis of Microtask and Macrotask in Javascript". After the study of this article, I believe you have a deeper understanding of the analysis of Microtask and Macrotask examples in Javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.