Details on macrotasks and microtasks in JavaScript

1. What are microtasks?
2. What are the macro tasks?
3. Case

3.1 Conclusion

4. Code Examples

4.1 Code Analysis
4.2 Conclusion and Application Scenarios

1. What are microtasks?

Promise

await and async

2. What are the macro tasks?

setTimeout

setInterval

DOM Events
AJAX Requests

3. Case

<script>

console.log(1)

setTimeout(()=>{

    console.log("2")

},0)

Promise.resolve().then(()=>{

    console.log('3')

})

console.log(4)

</script>

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

Why is it in this order?

Print 1-4 first. There is definitely no problem.

Why is 3 printed first and then 2?

Because 3 is Promise , Promise is a microtask.

2 is setTimeout , which is a macro task

Microtasks are executed earlier than macrotasks.

So 3 is executed first and then 2

3.1 Conclusion

Synchronous first, then asynchronous; micro first, then macro
Microtasks are executed earlier than macrotasks.

4. Code Examples

<body>

    <div id="app"></div>

<script>

// This section is DOM rendering let app=document.getElementById("app")

let cont='<p>I am a p tag</p>'

app.append(cont)

// DOM rendering ends console.log(1)

setTimeout(()=>{

    console.log("2")

    alert('setTimeout2')

},0)

Promise.resolve().then(()=>{

    console.log('3')

    alert('3')

})

console.log(4)

</script>

</body>

4.1 Code Analysis

Execution analysis of the above code:

You must execute 1-4 first.

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

It outputs 3 and then pops up 3

Then it says output 2 and pops up setTimeout2 [wrong]

Because there is a DOM rendering between microtasks and macrotasks

So then comes dom rendering, and finally the macro task

So after outputting 1-4 , DOM rendering is performed.

Then output 2 and then setTimeout2 pops up

4.2 Conclusion and Application Scenarios

Microtask>DOM rendering>Macrotask See the following example

Application scenarios of this conclusion

We have all done echarts. We know when rendering echarts.

The node can only be rendered after the DOM of the page is rendered.

So some friends will put the request timing in the monitored() life cycle

This ensures that the returned data can be rendered normally on the page.

In fact, based on the above conclusion.

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

The DOM is definitely rendered. Because the request is a macro task.

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

This is the end of this article about the details of macrotasks and microtasks in JavaScript . For more relevant content about macrotasks and microtasks in JavaScript , 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!

You may also be interested in:

A brief discussion on macrotasks and microtasks in js
JavaScript macrotasks and microtasks
A brief discussion on the execution order of JavaScript macrotasks and microtasks
A brief discussion on the principles of JavaScript event loop microtasks and macrotask queues
Analysis of JavaScript event loop and macro-task and micro-task principles
JS event loop mechanism event loop macro task micro task principle analysis
JavaScript microtasks and macrotasks explained

<<: A few front-end practice summaries of Alipay's new homepage

>>: The problem of introducing specified font @font-face in CSS to be compatible with various browsers