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

Editor to share with you what are macro tasks and micro tasks in JavaScript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. What are the micro tasks?

Promise

Await and async

2. What are the macro tasks?

SetTimeout

SetInterval

DOM event

AJAX request

Case console.log (1) setTimeout (() = > {console.log ("2")}, 0) Promise.resolve () .then (() = > {console.log ('3')}) console.log (4)

We found that the order of printing was 1-4-3-2.

Why in this order?

It must be no problem to print 1-4 first.

Why print 3 and then 2?

Because 3 is Promise,Promise is a micro task.

2 is setTimeout, which is a macro task

Micro tasks are executed earlier than macro tasks.

So 3 is executed first, then 2.

3.1 conclusion

First synchronous then asynchronous, first micro then macro

The execution time of micro task is earlier than that of macro task.

4. Code case / / this is the let app=document.getElementById ("app") let cont=' rendered by dom.

I'm the p tag.

'app.append (cont) / / dom rendering end console.log (1) setTimeout () = > {console.log ("2") alert (' setTimeout2')}, 0) Promise.resolve () .then () = > {console.log ('3') alert ('3') console.log (4) 4.1Code Analysis

The execution analysis of the above code:

It must be 1-4 first.

Then according to the micro task first and then the macro task

Is to output 3 and then pop 3.

Then say output 2 and pop up setTimeout2 [wrong]

Because there is also a DOM rendering between the micro task and the macro task

So then there's dom rendering, and finally the macro task.

So after outputting 1-4, you perform a DOM rendering.

And then output 2 and pop up setTimeout2.

4.2 conclusions and scenarios of application

Micro task "DOM rendering" macro task see the following example

The application scenario of this conclusion

We've all done echarts. We know that when rendering echarts.

You need to render the DOM of the page before you can get the node to render.

Therefore, some partners will ask the requested time to be placed in the life cycle of monuted ().

This ensures that the returned data will render properly on the page.

In fact, according to the above conclusion.

You can request data in created. When I came back.

The DOM must be finished rendering. Because the request is a macro task.

The execution time of the macro task is after DOM rendering.

These are all the contents of the article "what are Macro tasks and Micro tasks in JavaScript?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.