溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
JS中宏任務與微任務的原理解析？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
首先看一段代碼
async function (){
await f2()
console.log('f1')
}
async function f2(){
console.log('f2')
}
console.log('正常1')
f1()
setTimeout(()=>{
console.log('定時器')
})
console.log('正常2')正確的打印順序應該是：正常1，f2 ，正常2，f1，定時器
為什么會出現這樣打印順序呢
首先javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如果一個任務耗時過長，那么后一個任務也必須等著。所以就出現了同步任務和異步任務。
概念
除了廣義的同步任務和異步任務，對任務可以進行更精細的區分
宏任務：瀏覽器為了能夠使得JS內部task與DOM任務能夠有序的執行，會在一個task執行結束后，在下一個 task 執行開始前，對頁面進行重新渲染 （task->渲染->task->…）
鼠標點擊會觸發一個事件回調，需要執行一個宏任務，然后解析HTMl
微任務：微任務通常來說就是需要在當前 同步任務 執行結束后立即執行的任務，比如對一系列動作做出反饋，或者是需要異步的執行任務而又不需要分配一個新的任務，這樣便可以減小一點性能的開銷。
既然我們清楚了概念，我們再看一遍代碼
async function (){
await f2()
console.log('f1')
}
async function f2(){
console.log('f2')
}
console.log('正常1')
f1()
setTimeout(()=>{
console.log('定時器')
})
console.log('正常2')執行順序
首先我們進行正常的同步流程，打印出‘正常1'，接下來執行f1()函數，await后面的函數f2()會立即執行，所以會打印'f2',繼續執行同步代碼打印‘正常2'，至此同步任務全部結束，開始執行異步任務微任務，await f2()等待f2()方法執行完之后打印出f1，最后執行宏任務setTimeout打印‘定時器'
這就是為什么‘正常1',正常2'會打印在‘f1'之前，因為所有微任務執行的時候，當前執行棧的代碼必須已經執行完畢。‘f2','f1'會打印在‘定時器'之前是因為所有微任務總會在下一個宏任務之前全部執行完畢
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
