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

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

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

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

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

4）重复执行上面步骤

 

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

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

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

    <div id="container"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        const p1 = $("<p>一段文字</p>")
        const p2 = $("<p>一段文字</p>")
        const p3 = $("<p>一段文字</p>")
        $('#container').append(p1)
                       .append(p2)
                       .append(p3)
        
        //微任务Dom渲染前触发
        Promise.resolve().then(()=>{
            console.log('length1',$('#container').children().length) //先执行为3
            alert('Promise then')//这时候dom还没渲染
        })
        //宏任务Dom渲染后触发
        setTimeout(()=>{
            console.log('length2',$('#container').children().length)//dom已经渲染
            alert('setTimeout')
        })
    </script>

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

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

 

async function async1(){
    console.log('async1 start') //异步函数声明就会同步执行 2
    await async2()
    //后面都是异步回调callback的内容 是微任务的回调
    console.log('async1 end') //6
}
async function async2(){
    console.log('async2')  //异步函数声明就会同步执行 3
}
console.log('script start') //1

setTimeout(()=>{ //宏任务 setTimeout进入webapis等待
    console.log('setTimeout') //8
})

async1()

new Promise((resolve)=>{
    console.log('promise1') //4 promise函数初始化声明会同步执行
    resolve()
}).then(()=>{
    console.log('promise2') //7
})
console.log('script end') //5