微任務有哪些
Promise
await和async
宏任務有哪些
setTimeout
setInterval
DOM事件
AJAX請求
看下面的代碼
<script>
console.log(1)
setTimeout(()=>{
console.log("2")
},0)
Promise.resolve().then(()=>{
console.log('3')
})
console.log(4)
</script>
我們發現打印的順序是1-4-3-2
為什么是這樣的順序
先打印1-4這肯定是沒有問題的
為啥先打印3然后才是2
因為3是Promise,Promise是微任務。
2是setTimeout，它是宏任務
微任務的執行時機比宏任務早。
所以先執行的是3然后才是2
我的結論
先同步后異步，先微后宏
微任務的執行時機比宏任務早哈~
說說下面代碼的執行時機
<body>
<div id="app"></div>
<script>
// 這一段是dom渲染的
let app=document.getElementById("app")
let cont='<p>我是p標簽</p>'
app.append(cont)
// dom渲染結束
console.log(1)
setTimeout(()=>{
console.log("2")
alert('setTimeout2')
},0)
Promise.resolve().then(()=>{
console.log('3')
alert('3')
})
console.log(4)
</script>
</body>
上面這一段代碼的執行分析
肯定是先執行1-4
然后根據先微任務后宏任務
就是輸出3然后彈出3
然后就是說輸出2然后彈出setTimeout2 【錯誤的】
因為微任務和宏任務之間還有一個DOM渲染
所以然后是dom渲染，最后才是宏任務
所以輸出1-4后，執行的是DOM渲染。
然后才是輸出2然后彈出setTimeout2
結論和運用的場景
微任務》DOM渲染》宏任務 看下面的例子
這個結論的運用場景
我們都做過echarts.我們知道渲染echarts的時候。
需要頁面的DOM渲染完畢后，才能拿到節點進行渲染。
所以有的小伙伴會請請求的時機放在monuted()這個生命周期中
這樣就可以確保返回來的數據肯定能夠正常渲染在頁面上。
其實根據上面這個結論。
你完全可以在created中去請求數據。返回來的的時候。
DOM肯定渲染完了。因為請求是宏任務。
宏任務的執行時機是在DOM渲染后的哈
求求你了看官
如果你覺得我寫的還不錯的話~~
請你給我點個一個推薦或者關注我！！
或者請我買一包辣條謝謝你了~~~
