JavaScript 是單線程單并發(fā)語言

1. 什么是單線程

   主程序只有一個(gè)線程，即同一時(shí)間片斷內(nèi)其只能執(zhí)行單個(gè)任務(wù)。

2. 為什么選擇單線程？

   JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來很復(fù)雜的同步問題。

3. 單線程意味著什么？

   單線程就意味著，所有任務(wù)都需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就需要一直等著。這就會(huì)導(dǎo)致IO操作（耗時(shí)但cpu閑置）時(shí)造成性能浪費(fèi)的問題。

4. 如何解決單線程帶來的性能問題？

   答案是異步！主線程完全可以不管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）

1. 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ù)。

2. 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ù)（由瀏覽器決定，并不按序）。

3. Event Loop

   現(xiàn)在我們來聊事件循環(huán)。事件循環(huán)顧名思義它就是一個(gè)循環(huán)，主線程會(huì)不斷循環(huán)執(zhí)行上面的第三步,其基本的代碼邏輯如下所示：

   while (queue.waitForMessage()) {
     queue.processNextMessage();
   }
   

4. 常見異步任務(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ù)

1. MacroTask（Task）
   setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

2. MicroTask（在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

JavaScript Event Loop 機(jī)制詳解與 Vue.js 中實(shí)踐應(yīng)用

JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop