理解事件循環(huán)與任務隊列

JS是單線程的

JS是單線程的酷勺，也就是它一次只能執(zhí)行一段代碼本橙。JS中其實是沒有線程概念的，所謂的單線程也只是相對于多線程而言脆诉。JS的設(shè)計初衷就沒有考慮這些甚亭，針對JS這種不具備并行任務處理的特性，我們稱之為“單線程”击胜。

雖然JS運行在瀏覽器中是單線程的亏狰，但是瀏覽器是事件驅(qū)動的（Event driven），瀏覽器中很多行為是異步（Asynchronized）的偶摔，會創(chuàng)建事件并放入執(zhí)行隊列中暇唾。瀏覽器中很多異步行為都是由瀏覽器新開一個線程去完成，一個瀏覽器至少實現(xiàn)三個常駐線程：

JS引擎線程
GUI渲染線程
事件觸發(fā)線程

JS引擎

JavaScript引擎是一個專門處理JavaScript腳本的虛擬機啰挪，一般會附帶在網(wǎng)頁瀏覽器之中信不，比如最出名的就是Chrome瀏覽器的V8引擎，如下圖所示亡呵，JS引擎主要有兩個組件構(gòu)成：

堆-內(nèi)存分配發(fā)生的地方
棧-函數(shù)調(diào)用時會形一個個棧幀（frame）

調(diào)用棧

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

調(diào)用一個函數(shù)時抽活，返回地址（return address）、參數(shù)（arguments）锰什、本地變量（local variables）等都會被推入棧中下硕。當函數(shù)執(zhí)行完畢彈出堆棧的時候，局部變量（簡單數(shù)據(jù)類型）也會跟著彈出汁胆，復雜的數(shù)據(jù)類型的話則是彈出相應的指針梭姓。
只有簡單的數(shù)據(jù)類型（Number,String,Boolean,Undefined,Null,Symbol）是存放在棧中，復雜的數(shù)據(jù)類型譬如對象嫩码，數(shù)組誉尖，只是把對應的指針存放在棧中，真正的值是存放在Heap中的铸题，當這個對象沒有用處的時候铡恕，由垃圾回收機制進行釋放空間。
當一個函數(shù)嵌套另一個函數(shù)時丢间，則這個函數(shù)的相關(guān)參數(shù)也會被推入棧頂探熔。

事件循環(huán)與任務隊列

事件循環(huán)可以簡單描述為：

函數(shù)入棧，當Stack中執(zhí)行到異步任務的時候烘挫，就將他丟給WebAPIs,接著執(zhí)行同步任務,直到Stack為空;
在此期間WebAPIs完成這個事件诀艰，把回調(diào)函數(shù)放入CallbackQueue中等待;
當執(zhí)行棧為空時，Event Loop把Callback Queue中的一個任務放入Stack中,回到第1步。

Event Loop是由javascript宿主環(huán)境（像瀏覽器）來實現(xiàn)的;
WebAPIs是由C++實現(xiàn)的瀏覽器創(chuàng)建的線程其垄，處理諸如DOM事件苛蒲、http請求、定時器等異步事件;
JavaScript 的并發(fā)模型基于"事件循環(huán)";
Callback Queue(Event Queue 或者 Message Queue) 任務隊列,存放異步任務的回調(diào)函數(shù)

var start=new Date();
setTimeout(function cb(){
    console.log("時間間隔：",new Date()-start+'ms');
},500);
while(new Date()-start<1000){};

main()入棧,局部變量start初始化;
setTimeout入棧,出棧,丟給WebAPIs,開始定時500ms;
while循環(huán)入棧,開始阻塞1000ms;
500ms過后,WebAPIs把cb()放入任務隊列,此時while循環(huán)還在棧中,cb()等待;
又過了500ms,while循環(huán)執(zhí)行完畢從棧中彈出,main()彈出,此時棧為空,Event Loop,cb()進入棧,log()進棧,輸出'時間間隔：1003ms',出棧,cb()出棧

Microtasks和Macrotasks

macro-task（Task）包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering捉捅。

micro-task（Job）包括：process.nextTick, Promises.then(), Object.observe(已被廢棄), MutationObserver

根據(jù) WHATVG 的說明撤防，在一個事件循環(huán)的周期(cycle)中一個 (macro)task 應該從 macrotask 隊列開始執(zhí)行虽风。當這個 macrotask 結(jié)束后棒口，所有的 microtasks 將在同一個 cycle 中執(zhí)行。在 microtasks 執(zhí)行時還可以加入更多的 microtask辜膝，然后一個一個的執(zhí)行无牵，直到 microtask 隊列清空。

setTimeout(function cb() {
    console.log(4);
}, 0);
new Promise(function executor (resolve) {
    console.log(1);
    for(var i = 0; i < 10000; i++) {
      i == 9999 && resolve();
    }
    console.log(2);
}).then(function onFulfilled() {
    console.log(5);
});
console.log(3);
//執(zhí)行結(jié)果:1 2 3 5 4

或者可以簡單寫成這樣：

setTimeout();
var promise = new Promise(executor);
promise.then(callback);
console.log(3);

main()入棧;
setTimeout入棧厂抖，出棧茎毁，丟給WebAPIs，開始定時0ms(實際上不一定是多少,總之大于0)忱辅，到時之后七蜘，將回調(diào)函數(shù)cb()放入macrotask queue;
Promise構(gòu)造函數(shù)executor()入棧，log(1)入棧,輸出1,出棧;
for循環(huán)入棧墙懂，當i=9999時橡卤，resolve()入棧，Promise實例的狀態(tài)變?yōu)閒ulfilled（完成）损搬，resolve()出棧碧库。構(gòu)造函數(shù)執(zhí)行完后，我們得到了promise（它是resolved）巧勤；
promise.then入棧，onFulfilled（then方法綁定的resolved狀態(tài)的回調(diào)函數(shù)）放入microtask queue;
log(2)入棧，輸出2恨豁，出棧;
executor()出棧;
log(3)入棧奠骄，輸出3，出棧剩瓶，main()出棧;
此時棧為空驹溃，microtask queue中的任務可以進棧了，onFulfilled()入棧儒搭，log(5)入棧吠架，輸出5，出棧;
此時Stack和microtask queue都為空搂鲫，Event Loop傍药，將macrotask queue中的cb()入棧，log(4)入棧，輸出4拐辽，log(4)出棧拣挪，cb()出棧

Promise構(gòu)造函數(shù)是同步函數(shù),該executor函數(shù)由Promise實現(xiàn)立即執(zhí)行
resolve函數(shù)由 JavaScript 引擎提供，不用自己部署俱诸。

參考資料：

Tasks, microtasks, queues and schedules . https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
Understanding Javascript Function Executions?—?Call Stack, Event Loop , Tasks & more?—?Part 1 . https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec
How JavaScript works: an overview of the engine, the runtime, and the call stack . https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
理解事件循環(huán)一(淺析) . https://github.com/ccforward/cc/issues/47
理解事件循環(huán)二(macrotask和microtask . https://github.com/ccforward/cc/issues/48
從Promise來看JavaScript中的Event Loop菠劝、Tasks和Microtasks . https://github.com/creeperyang/blog/issues/21
理解 Node.js 事件循環(huán) . http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack-1652.html
Philip Roberts: What the heck is the event loop anyway? . https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
http://latentflip.com/loupe
Promises/A+ . https://promisesaplus.com/