1. 同步任務(wù)與異步任務(wù)
所有的任務(wù)可以分為同步任務(wù)和異步任務(wù)。
- 同步任務(wù)就是立即執(zhí)行的任務(wù)，同步任務(wù)一般會(huì)直接進(jìn)入到執(zhí)行棧中執(zhí)行，且只有一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行下一個(gè)任務(wù)；
- 異步任務(wù)，不進(jìn)入主線程，而是放在任務(wù)隊(duì)列中，若有多個(gè)異步任務(wù)則需要在任務(wù)隊(duì)列中排隊(duì)等待，任務(wù)隊(duì)列類(lèi)似于緩沖區(qū)，任務(wù)下一步會(huì)被移到執(zhí)行棧然后主線程執(zhí)行調(diào)用棧的任務(wù)。
2. 執(zhí)行棧與任務(wù)隊(duì)列
- 執(zhí)行棧：英文Call Stack，也叫調(diào)用棧。
????????執(zhí)行棧用于組織JS代碼，保障JS代碼的有序執(zhí)行。每當(dāng)調(diào)用一個(gè)函數(shù)時(shí)，都會(huì)在執(zhí)行棧中加入一個(gè)與之對(duì)應(yīng)的執(zhí)行期上下文，這個(gè)上下文定義了該函數(shù)執(zhí)行時(shí)的環(huán)境，加入執(zhí)行上下文之后，在執(zhí)行函數(shù)。當(dāng)函數(shù)執(zhí)行后出棧，執(zhí)行下一個(gè)。 - 任務(wù)隊(duì)列：英文Event Queue，也叫事件隊(duì)列。
????????任務(wù)隊(duì)列使用到的是數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列結(jié)構(gòu)，它用來(lái)保存異步任務(wù)，遵循先進(jìn)先出的原則。它主要負(fù)責(zé)將新的任務(wù)發(fā)送到隊(duì)列中進(jìn)行處理。
3. macrotask（宏任務(wù)隊(duì)列）與microtask（微任務(wù)隊(duì)列）
任務(wù)隊(duì)列分成macrotask（宏任務(wù)隊(duì)列） 和 microtask（微任務(wù)隊(duì)列）
- 宏任務(wù)： script( 整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 環(huán)境)
- 微任務(wù)： Promise.then()、Promise.catch()、MutaionObserver、process.nextTick(Node.js 環(huán)境)；
4. Eventloop 在處理宏任務(wù)和微任務(wù)的邏輯時(shí)的執(zhí)行情況如下：
- JavaScript 引擎首先從宏任務(wù)隊(duì)列中取出第一個(gè)任務(wù)；
- 執(zhí)行完畢后，再將微任務(wù)隊(duì)列中的所有任務(wù)取出，按照順序分別全部執(zhí)行（這里包括不僅指開(kāi)始執(zhí)行時(shí)隊(duì)列里的微任務(wù)），如果在這一步過(guò)程中產(chǎn)生新的微任務(wù)，也需要執(zhí)行，也就是說(shuō)在執(zhí)行微任務(wù)過(guò)程中產(chǎn)生的新的微任務(wù)并不會(huì)推遲到下一個(gè)循環(huán)中執(zhí)行，而是在當(dāng)前的循環(huán)中繼續(xù)執(zhí)行。
- 然后再?gòu)暮耆蝿?wù)隊(duì)列中取下一個(gè)，執(zhí)行完畢后，再次將 microtask queue 中的全部取出，循環(huán)往復(fù)，直到兩個(gè) queue 中的任務(wù)都取完。
也是就是說(shuō)，一次 Eventloop 循環(huán)會(huì)處理一個(gè)宏任務(wù)和所有這次循環(huán)中產(chǎn)生的微任務(wù)。
通過(guò)一段代碼的運(yùn)行來(lái)講述事件循環(huán)機(jī)制：
console.log('同步代碼1');
setTimeout(() => {
console.log('setTimeout1')
new Promise((resolve) => {
console.log('Promise 1')
resolve()
}).then(() => {
console.log('promise.then1')
})
}, 10)
new Promise((resolve) => {
console.log('同步代碼2, Promise 2')
setTimeout(() => {
console.log('setTimeout2')
}, 10)
resolve()
}).then(() => {
console.log('promise.then2');
setTimeout(() => {
console.log('setTimeout3')
}, 10);
new Promise((resolve) => {
console.log('Promise 3')
resolve()
}).then(() => {
console.log('promise.then3')
});
})
console.log('同步代碼3');
/* 宏任務(wù)隊(duì)列中第1個(gè)宏任務(wù)script的打?。?/
// 同步代碼1
// 同步代碼2, Promise 2
// 同步代碼3
// promise.then2
// Promise 3
// promise.then3
/* 宏任務(wù)隊(duì)列中第2個(gè)宏任務(wù)setTimeout1的打?。?/
// setTimeout1
// Promise 1
// promise.then1
/* 宏任務(wù)隊(duì)列中第3個(gè)宏任務(wù)setTimeout2的打?。?/
// setTimeout2
/* 宏任務(wù)隊(duì)列中第3個(gè)宏任務(wù)setTimeout3的打?。?/
// setTimeout3
以上代碼的執(zhí)行邏輯為：
- 當(dāng)前任務(wù)隊(duì)列只有script這個(gè)代碼片段，開(kāi)始執(zhí)行:
- 遇到第一個(gè)console，它是同步代碼，加入執(zhí)行棧，執(zhí)行并出棧，打印出 "同步代碼1"；
- 遇到setTimeout（取名叫：setTimeout1），它是一個(gè)宏任務(wù)，加入宏任務(wù)隊(duì)列， 所以我們的宏任務(wù)隊(duì)列就變?yōu)閙acrotask: [setTimeout1]；
- 遇到new Promise 中的console，它是同步代碼，加入執(zhí)行棧，執(zhí)行并出棧，打印出 "同步代碼2, Promise 2"；
- 遇到setTimeout（取名叫：setTimeout2），它是一個(gè)宏任務(wù)，加入宏任務(wù)隊(duì)列， 即macrotask: [setTimeout1，setTimeout2]；
- 遇到Promise2的 then，它是一個(gè)微任務(wù)，加入微任務(wù)隊(duì)列， 我們的微任務(wù)隊(duì)列變?yōu)閙icrotask: [Promise 2的then]；
- 遇到第三個(gè)console，它是同步代碼，加入執(zhí)行棧，執(zhí)行并出棧，打印出 "同步代碼3"；
- 此時(shí)執(zhí)行棧為空，去執(zhí)行微任務(wù)隊(duì)列中所有任務(wù)(由上可知我們的微任務(wù)隊(duì)列此時(shí)為microtask: [Promise 2的then])；
- microtask: [Promise 2的then]出隊(duì)列進(jìn)入執(zhí)行棧去執(zhí)行Promise 2的then，即microtask: []；
- 遇到console，它是同步代碼，加入執(zhí)行棧，執(zhí)行并出棧，打印出 "promise.then2"；
- 遇到setTimeout（取名叫：setTimeout3），它是一個(gè)宏任務(wù)，加入宏任務(wù)隊(duì)列， 即macrotask: [setTimeout1，setTimeout2，setTimeout3]；
- 遇到new Promise 中的console，它是同步代碼，加入執(zhí)行棧，執(zhí)行并出棧，打印出 "Promise 3"；
- 遇到Promise3的 then，它是一個(gè)微任務(wù)，加入微任務(wù)隊(duì)列， 我們的微任務(wù)隊(duì)列變?yōu)閙icrotask: [Promise3的then]；
- promise.then2的微任務(wù)執(zhí)行完畢，但是由上可知，當(dāng)前微任務(wù)隊(duì)列依舊有任務(wù)，所以繼續(xù)將當(dāng)前微任務(wù)隊(duì)列中的任務(wù)push到執(zhí)行棧中進(jìn)行執(zhí)行，即執(zhí)行Promise3的then（microtask：[]）;
- 打印"promise.then3";
- 執(zhí)行棧為空且當(dāng)前循環(huán)中微任務(wù)隊(duì)列為空，那么去執(zhí)行下個(gè)宏任務(wù)，（當(dāng)前macrotask: [setTimeout1，setTimeout2，setTimeout3]）；
- 執(zhí)行宏任務(wù)setTimeout1，macrotask: [setTimeout2，setTimeout3]）；
- 遇console，為同步，打印"setTimeout1"；
- 遇new Promise為同步，打印"Promise 1"；
- 遇Promise1的then，為微任務(wù)，放入微任務(wù)隊(duì)列中，即microtask：[Promise1的then]
- 當(dāng)前循環(huán)中宏任務(wù)執(zhí)行完畢，執(zhí)行當(dāng)前的微任務(wù)隊(duì)列中的任務(wù)，即執(zhí)行Promise1的then，打印“promise.then1”；
- 當(dāng)前循環(huán)的宏任務(wù)與微任務(wù)全部執(zhí)行完畢，繼續(xù)執(zhí)行下個(gè)宏任務(wù)setTimeout2，macrotask: [setTimeout3]）；
- 打印“ setTimeout2”；
- 當(dāng)前循環(huán)中沒(méi)有微任務(wù)，執(zhí)行下個(gè)宏任務(wù)setTimeout3，macrotask：[];
- 打印“ setTimeout3”；
- 當(dāng)前循環(huán)中沒(méi)有微任務(wù);
- 宏任務(wù)隊(duì)列也為空，至此全部執(zhí)行完畢。
從上面的宏任務(wù)和微任務(wù)的工作流程中，可以得出以下結(jié)論：
- 微任務(wù)和宏任務(wù)是綁定的，每個(gè)宏任務(wù)在執(zhí)行時(shí)，會(huì)創(chuàng)建自己的微任務(wù)隊(duì)列。
- 微任務(wù)的執(zhí)行時(shí)長(zhǎng)會(huì)影響當(dāng)前宏任務(wù)的時(shí)長(zhǎng)。比如一個(gè)宏任務(wù)在執(zhí)行過(guò)程中，產(chǎn)生了 10 個(gè)微任務(wù)，執(zhí)行每個(gè)微任務(wù)的時(shí)間是 10ms，那么執(zhí)行這 10 個(gè)微任務(wù)的時(shí)間就是 100ms，也可以說(shuō)這 10 個(gè)微任務(wù)讓宏任務(wù)的執(zhí)行時(shí)間延長(zhǎng)了 100ms。
- 在一個(gè)宏任務(wù)中，分別創(chuàng)建一個(gè)用于回調(diào)的宏任務(wù)和微任務(wù)，無(wú)論什么情況下，微任務(wù)都早于宏任務(wù)執(zhí)行（優(yōu)先級(jí)更高）。
參考：
https://juejin.cn/post/6992167223523541023
https://segmentfault.com/a/1190000022805523
https://juejin.cn/post/7031751891201884174
