[Front-end basics] JavaScript macro tasks and micro tasks

Be sure to incorporate this article! ! [Front-end basic knowledge] event-loop event loop mechanism (super easy to understand, must learn knowledge points, recommended collection)

1. Macro task

Macro tasks include setTimeout, setInterval, DOM rendering, and AJAX requests.
Macro tasks will be put into the message queue.

2. Micro tasks

Microtasks include Promise, async/await microtasks
will be put into the microtask queue.

3. Execution order of macro tasks and micro tasks

Microtask execution time is earlier than DOM rendering.
Micro task -> DOM rendering -> macro task

insert image description here

4. Cases

Promise.resolve().then(() => {
    
    
    console.log('promise')
})
setTimeout(() => {
    
    
    console.log('settimeout')
}, 0);
console.log('global')

insert image description here

The above is the content of micro-tasks and macro-tasks, please pay attention to the " Front-end Basics " column.
I will share the common problems in my usual projects and the knowledge of the written test and interview with you on CSDN, and make progress together. Come on.

Guess you like

Origin blog.csdn.net/weixin_46318413/article/details/122778060