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ì)列類似于緩沖區(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è)與之對應(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)摆尝，它用來保存異步任務(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í)行（這里包括不僅指開始執(zhí)行時(shí)隊(duì)列里的微任務(wù)），如果在這一步過程中產(chǎn)生新的微任務(wù)取逾，也需要執(zhí)行耗绿，也就是說在執(zhí)行微任務(wù)過程中產(chǎn)生的新的微任務(wù)并不會(huì)推遲到下一個(gè)循環(huán)中執(zhí)行，而是在當(dāng)前的循環(huán)中繼續(xù)執(zhí)行砾隅。
- 然后再從宏任務(wù)隊(duì)列中取下一個(gè)误阻，執(zhí)行完畢后，再次將 microtask queue 中的全部取出晴埂，循環(huán)往復(fù)究反，直到兩個(gè) queue 中的任務(wù)都取完。
也是就是說儒洛，一次 Eventloop 循環(huán)會(huì)處理一個(gè)宏任務(wù)和所有這次循環(huán)中產(chǎn)生的微任務(wù)精耐。
通過一段代碼的運(yùn)行來講述事件循環(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è)代碼片段浅浮，開始執(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)中沒有微任務(wù)，執(zhí)行下個(gè)宏任務(wù)setTimeout3咨演，macrotask：[];
- 打印“ setTimeout3”盾似；
- 當(dāng)前循環(huán)中沒有微任務(wù);
- 宏任務(wù)隊(duì)列也為空，至此全部執(zhí)行完畢。
從上面的宏任務(wù)和微任務(wù)的工作流程中零院，可以得出以下結(jié)論：
- 微任務(wù)和宏任務(wù)是綁定的溉跃，每個(gè)宏任務(wù)在執(zhí)行時(shí)，會(huì)創(chuàng)建自己的微任務(wù)隊(duì)列告抄。
- 微任務(wù)的執(zhí)行時(shí)長會(huì)影響當(dāng)前宏任務(wù)的時(shí)長撰茎。比如一個(gè)宏任務(wù)在執(zhí)行過程中，產(chǎn)生了 10 個(gè)微任務(wù)打洼，執(zhí)行每個(gè)微任務(wù)的時(shí)間是 10ms龄糊，那么執(zhí)行這 10 個(gè)微任務(wù)的時(shí)間就是 100ms，也可以說這 10 個(gè)微任務(wù)讓宏任務(wù)的執(zhí)行時(shí)間延長了 100ms募疮。
- 在一個(gè)宏任務(wù)中炫惩，分別創(chuàng)建一個(gè)用于回調(diào)的宏任務(wù)和微任務(wù)，無論什么情況下阿浓，微任務(wù)都早于宏任務(wù)執(zhí)行（優(yōu)先級更高）他嚷。
參考：
https://juejin.cn/post/6992167223523541023
https://segmentfault.com/a/1190000022805523
https://juejin.cn/post/7031751891201884174
