JavaScript 是單線程單并發(fā)語言
-
什么是單線程
主程序只有一個(gè)線程，即同一時(shí)間片斷內(nèi)其只能執(zhí)行單個(gè)任務(wù)雹舀。
-
為什么選擇單線程芦劣？
JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM说榆。這決定了它只能是單線程虚吟，否則會(huì)帶來很復(fù)雜的同步問題。
-
單線程意味著什么签财？
單線程就意味著串慰，所有任務(wù)都需要排隊(duì)，前一個(gè)任務(wù)結(jié)束唱蒸，才會(huì)執(zhí)行后一個(gè)任務(wù)邦鲫。如果前一個(gè)任務(wù)耗時(shí)很長，后一個(gè)任務(wù)就需要一直等著神汹。這就會(huì)導(dǎo)致
IO操作（耗時(shí)但cpu閑置）時(shí)造成性能浪費(fèi)的問題庆捺。 -
如何解決單線程帶來的性能問題？
答案是異步屁魏！主線程完全可以不管IO操作滔以，暫時(shí)掛起處于等待中的任務(wù)，先運(yùn)行排在后面的任務(wù)蚁堤。等到IO操作返回了結(jié)果醉者，再回過頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去披诗。于是，所有任務(wù)可以分成兩種立磁，一種是同步任務(wù)（synchronous）呈队，另一種是異步任務(wù)（asynchronous）
**注：** 當(dāng)主線程阻塞時(shí)，任務(wù)隊(duì)列仍然是能夠被推入任務(wù)的
事件循環(huán)（Event Loop）
-
JavaScript 內(nèi)存模型
講事件循環(huán)之前唱歧，先看一張下網(wǎng)上看到的 JavaScript 內(nèi)存模型宪摧，相信看完這個(gè)會(huì)對(duì)事件循環(huán)機(jī)制有一種豁然開朗的感覺。
- 調(diào)用棧（Call Stack）：用于主線程任務(wù)的執(zhí)行
- 堆（Heap）： 用于存放非結(jié)構(gòu)化數(shù)據(jù)颅崩，譬如程序分配的變量與對(duì)象
- 任務(wù)隊(duì)列（Queue）： 用于存放異步任務(wù)與定時(shí)任務(wù)几于。
-
JavaScript 代碼執(zhí)行機(jī)制：
- 所有同步任務(wù)都在主線程上的棧中執(zhí)行。
- 主線程之外沿后，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）沿彭。只要異步任務(wù)有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件尖滚。
- 一旦"棧"中的所有同步任務(wù)執(zhí)行完畢喉刘，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"瞧柔，選擇出需要首先執(zhí)行的任務(wù)（由瀏覽器決定班巩，并不按序）恩溅。
-
Event Loop
現(xiàn)在我們來聊事件循環(huán)。事件循環(huán)顧名思義它就是一個(gè)循環(huán)输涕，主線程會(huì)不斷循環(huán)執(zhí)行上面的第三步,其基本的代碼邏輯如下所示：
while (queue.waitForMessage()) { queue.processNextMessage(); } -
常見異步任務(wù)進(jìn)入任務(wù)隊(duì)列時(shí)機(jī)
行為 時(shí)機(jī) DOM操作 在用戶點(diǎn)擊等操作事件完成后 網(wǎng)絡(luò)操作（Ajax等） 在網(wǎng)絡(luò)操作響應(yīng)后 定時(shí)器 在規(guī)定時(shí)間到達(dá)后 事件循環(huán)機(jī)制圖解：
任務(wù)
MacroTask（Task）
setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI renderingMicroTask（在ES2015規(guī)范中稱為Job）
process.nextTick, Promise, Object.observe, MutationObserver
規(guī)范：
- 每個(gè)瀏覽器環(huán)境廉邑，至多有一個(gè)event loop哥蔚。
- 一個(gè)event loop可以有1個(gè)或多個(gè)task queue，而僅有一個(gè) MicroTask Queue蛛蒙。
- 一個(gè)task queue是一列有序的task, 每個(gè)task定義時(shí)都有一個(gè)task source肺素，從同一個(gè)task source來的task必須放到同一個(gè)task queue，從不同源來的則被添加到不同隊(duì)列宇驾。
- tasks are scheduled倍靡，所以瀏覽器可以從內(nèi)部到JS/DOM，保證動(dòng)作按序發(fā)生课舍。
- Microtasks are scheduled塌西，Microtask queue 在當(dāng)前 task queue 的結(jié)尾執(zhí)行。microtask中添加的microtask也被添加到Microtask queue的末尾并處理筝尾。
注： event loop的每個(gè)turn捡需，是由瀏覽器決定先執(zhí)行哪個(gè)task queue。這允許瀏覽器為不同的task source設(shè)置不同的優(yōu)先級(jí)筹淫，比如為用戶交互設(shè)置更高優(yōu)先級(jí)來使用戶感覺流暢站辉。
示例
function ELoop() {
// 當(dāng)前任務(wù)
let p = new Promise((resolve, reject)=>{
console.log("current Task")
resolve();
});
let nextP;
setTimeout(()=>{
console.log("MacroTask_1");
nextP.then(()=>{
// 第一次執(zhí)行時(shí)，這段代碼并沒有執(zhí)行到损姜。
console.log("MicroTask_promise_1"); //第一個(gè)MicroTask
})
console.log("MacroTask_1 end")
}, 0) // 第一個(gè) MacroTask
setTimeout(()=>{
console.log("MacroTask_2");
console.log("MacroTask_2 end")
}, 0)// 第二個(gè)MacroTask
nextP = p.then(()=>{
console.log("MicroTask_promise_2"); //第一個(gè)MicroTask
console.log(1)
}).then(()=>{
console.log("MicroTask_promise_3"); // 第二個(gè)MicroTask
console.log(1)
})
console.log("current Task end")
}
ELoop();
/**輸出結(jié)果：
current Task
MicroTask_promise_2
MicroTask_promise_3
MacroTask_1
MicroTask_promise_1
MacroTask_2
**/
參考文獻(xiàn):
從Promise來看JavaScript中的Event Loop饰剥、Tasks和Microtasks
