javascript中的宏任务和微任务（二）

js事件轮询执行顺序总结：

1）所有的同步任务都在主线程上执行，行成一个执行栈。

2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。

3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在进行DOM渲染，最后执行宏任务队列。

4）重复执行上面步骤

为什么微任务比宏任务先触发？

宏任务：Dom渲染后触发，如settimeout

微任务：Dom渲染前触发，如promise

 1     <div id="container"></div>
 2     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
 3     <script>
 4         const p1 = $("<p>一段文字</p>")
 5         const p2 = $("<p>一段文字</p>")
 6         const p3 = $("<p>一段文字</p>")
 7         $('#container').append(p1)
 8                        .append(p2)
 9                        .append(p3)
10
11         //微任务Dom渲染前触发
12         Promise.resolve().then(()=>{
13             console.log('length1',$('#container').children().length) //先执行为3
14             alert('Promise then')//这时候dom还没渲染
15         })
16         //宏任务Dom渲染后触发
17         setTimeout(()=>{
18             console.log('length2',$('#container').children().length)//dom已经渲染
19             alert('setTimeout')
20         })
21     </script>

上面可以看出dom渲染在微任务之后，宏任务之前

看一个宏任务微任务执行顺序的面试题目

 1 async function async1(){
 2     console.log('async1 start') //异步函数声明就会同步执行 2
 3     await async2()
 4     //后面都是异步回调callback的内容 是微任务的回调
 5     console.log('async1 end') //6
 6 }
 7 async function async2(){
 8     console.log('async2')  //异步函数声明就会同步执行 3
 9 }
10 console.log('script start') //1
11
12 setTimeout(()=>{ //宏任务 setTimeout进入webapis等待
13     console.log('setTimeout') //8
14 })
15
16 async1()
17
18 new Promise((resolve)=>{
19     console.log('promise1') //4 promise函数初始化声明会同步执行
20     resolve()
21 }).then(()=>{
22     console.log('promise2') //7
23 })
24 console.log('script end') //5