基本知識
js是單線程的，只有一個主線程處理邏輯
事件循環(huán)的作用
保證主線程, 有序并高效 或非阻塞 的處理
在js事件中主要分為同步事件（同步任務(wù)）與異步事件（異步任務(wù))
同步事件
在主線程中執(zhí)行的任務(wù)
異步事件
只有主線程的執(zhí)行棧為空時才開始執(zhí)行異步任務(wù)舞箍，異步任務(wù)又可進(jìn)一步分為宏任務(wù)與微任務(wù)
宏任務(wù)與微任務(wù)的分類
宏任務(wù)：
- script(整體代碼)
- setTimeout
- setInterval
- setImmediate
- I/O
- UI render
微任務(wù)：
- process.nextTick
- Promise
- Async
- MutationObserver
事件循環(huán)運行機制
- 首先執(zhí)行同步代碼，遇到宏任務(wù)將其加入宏任務(wù)隊列菇绵，遇到微任務(wù)（微任務(wù)中又存在微任務(wù)會將其就加入到微任務(wù)隊列的隊尾）將其加入微任務(wù)隊列，直到主線程執(zhí)行棧為空
- 檢查是否存在微任務(wù)昧港，有則會執(zhí)行至微任務(wù)隊列為空扔罪，然后執(zhí)行下一個宏任務(wù)
- 上述過程會不斷重復(fù)始腾，也就是常說的Event Loop(事件循環(huán))。
事件循環(huán)執(zhí)行循序
-
算上script(整體代碼)宏任務(wù)呕寝，因當(dāng)前主線程執(zhí)行棧為空勋眯，script(整體代碼)中的事件會立即加入到主線程中執(zhí)行
image.png
動手試一試
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
return Promise.resolve().then(()=>{
console.log('async2 end1')
})
}
async1()
setTimeout(function() {
console.log('setTimeout1')
setTimeout(function() {
console.log('setTimeout3')
}, 0)
new Promise(resolve => {
resolve()
}).then(function() {
console.log('promise3')
})
.then(function() {
console.log('promise4')
})
}, 0)
setTimeout(function() {
console.log('setTimeout2')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
setTimeout(()=>{
console.log("123456")
},0)
})
new Promise(resolve=>{
resolve()
}).then(()=>{
console.log('456789')
})
console.log('script end')
相關(guān)資料
并發(fā)模型與事件循環(huán)
js中的宏任務(wù)與微任務(wù)
JS事件循環(huán)機制（event loop）之宏任務(wù)、微任務(wù)
