JS是單線程的
JS是單線程的，也就是它一次只能執(zhí)行一段代碼。JS中其實(shí)是沒有線程概念的，所謂的單線程也只是相對于多線程而言。JS的設(shè)計(jì)初衷就沒有考慮這些，針對JS這種不具備并行任務(wù)處理的特性，我們稱之為“單線程”。
雖然JS運(yùn)行在瀏覽器中是單線程的，但是瀏覽器是事件驅(qū)動的（Event driven），瀏覽器中很多行為是異步（Asynchronized）的，會創(chuàng)建事件并放入執(zhí)行隊(duì)列中。瀏覽器中很多異步行為都是由瀏覽器新開一個(gè)線程去完成，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：
- JS引擎線程
- GUI渲染線程
- 事件觸發(fā)線程
JS引擎
JavaScript引擎是一個(gè)專門處理JavaScript腳本的虛擬機(jī)，一般會附帶在網(wǎng)頁瀏覽器之中，比如最出名的就是Chrome瀏覽器的V8引擎，如下圖所示，JS引擎主要有兩個(gè)組件構(gòu)成：
- 堆-內(nèi)存分配發(fā)生的地方
-
棧-函數(shù)調(diào)用時(shí)會形一個(gè)個(gè)棧幀（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)用一個(gè)函數(shù)時(shí)，返回地址（return address）、參數(shù)（arguments）、本地變量（local variables）等都會被推入棧中。當(dāng)函數(shù)執(zhí)行完畢彈出堆棧的時(shí)候，局部變量（簡單數(shù)據(jù)類型）也會跟著彈出，復(fù)雜的數(shù)據(jù)類型的話則是彈出相應(yīng)的指針。
- 只有簡單的數(shù)據(jù)類型（Number,String,Boolean,Undefined,Null,Symbol）是存放在棧中，復(fù)雜的數(shù)據(jù)類型譬如對象，數(shù)組，只是把對應(yīng)的指針存放在棧中，真正的值是存放在Heap中的，當(dāng)這個(gè)對象沒有用處的時(shí)候，由垃圾回收機(jī)制進(jìn)行釋放空間。
- 當(dāng)一個(gè)函數(shù)嵌套另一個(gè)函數(shù)時(shí)，則這個(gè)函數(shù)的相關(guān)參數(shù)也會被推入棧頂。
事件循環(huán)與任務(wù)隊(duì)列
事件循環(huán)可以簡單描述為：
1、函數(shù)入棧，當(dāng)Stack中執(zhí)行到異步任務(wù)的時(shí)候，就將他丟給WebAPIs,接著執(zhí)行同步任務(wù),直到Stack為空;
2、在此期間WebAPIs完成這個(gè)事件，把回調(diào)函數(shù)放入CallbackQueue中等待;
3、當(dāng)執(zhí)行棧為空時(shí)，Event Loop把Callback Queue中的一個(gè)任務(wù)放入Stack中,回到第1步。
- Event Loop是由javascript宿主環(huán)境（像瀏覽器）來實(shí)現(xiàn)的;
- WebAPIs是由C++實(shí)現(xiàn)的瀏覽器創(chuàng)建的線程，處理諸如DOM事件、http請求、定時(shí)器等異步事件;
- JavaScript 的并發(fā)模型基于"事件循環(huán)";
Callback Queue(Event Queue 或者 Message Queue) 任務(wù)隊(duì)列,存放異步任務(wù)的回調(diào)函數(shù)
setTimeout和setInterval的運(yùn)行機(jī)制是，將指定的代碼移出本次執(zhí)行，等到下一輪Event Loop時(shí)，再檢查是否到了指定時(shí)間。如果到了，就執(zhí)行對應(yīng)的代碼；如果不到，就等到再下一輪Event Loop時(shí)重新判斷。這意味著，setTimeout指定的代碼，必須等到本次執(zhí)行的所有代碼都執(zhí)行完，才會執(zhí)行。
setTimeout的作用是將代碼推遲到指定時(shí)間執(zhí)行，如果指定時(shí)間為0，即setTimeout(f,0)，那么不會立刻執(zhí)行
setTimeout(f,0)將第二個(gè)參數(shù)設(shè)為0，作用是讓f在現(xiàn)有的任務(wù)（腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件）一結(jié)束就立刻執(zhí)行。也就是說，setTimeout(f,0)的作用是，盡可能早地執(zhí)行指定的任務(wù)。
看兩個(gè)例子更好理解
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
以上這段代碼給人一種感覺setTimeout(f,0)就是立即執(zhí)行，運(yùn)行沒有什么問題啊 ，其實(shí)不然，看運(yùn)行圖所示我們知道 setTimeout(f,0)會被放到異步操作線程里面，等同步執(zhí)行函數(shù)完成之后在接著執(zhí)行。具體執(zhí)行順序流程實(shí)例：
var start=new Date();
setTimeout(function cb(){
console.log("時(shí)間間隔：",new Date()-start+'ms');
},500);
while(new Date()-start<1000){};
- main()入棧,局部變量start初始化;
- setTimeout入棧,出棧,丟給WebAPIs,開始定時(shí)500ms;
- while循環(huán)入棧,開始阻塞1000ms;
- 500ms過后,WebAPIs把cb()放入任務(wù)隊(duì)列,此時(shí)while循環(huán)還在棧中,cb()等待;
- 又過了500ms,while循環(huán)執(zhí)行完畢從棧中彈出,main()彈出,此時(shí)棧為空,Event
Loop,cb()進(jìn)入棧,log()進(jìn)棧,輸出'時(shí)間間隔：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 的說明，在一個(gè)事件循環(huán)的周期(cycle)中一個(gè) (macro)task 應(yīng)該從 macrotask 隊(duì)列開始執(zhí)行。當(dāng)這個(gè) macrotask 結(jié)束后，所有的 microtasks 將在同一個(gè) cycle 中執(zhí)行。在 microtasks 執(zhí)行時(shí)還可以加入更多的 microtask，然后一個(gè)一個(gè)的執(zhí)行，直到 microtask 隊(duì)列清空。
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，開始定時(shí)0ms(實(shí)際上不一定是多少,總之大于0)，到時(shí)之后，將回調(diào)函數(shù)cb()放入macrotask queue;
- Promise構(gòu)造函數(shù)executor()入棧，log(1)入棧,輸出1,出棧;
- for循環(huán)入棧，當(dāng)i=9999時(shí)，resolve()入棧，Promise實(shí)例的狀態(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()出棧;
- 此時(shí)棧為空，microtask queue中的任務(wù)可以進(jìn)棧了，onFulfilled()入棧，log(5)入棧，輸出5，出棧;
- 此時(shí)Stack和microtask queue都為空，Event Loop，將macrotask queue中的cb()入棧，log(4)入棧，輸出4，log(4)出棧，cb()出棧
Promise構(gòu)造函數(shù)是同步函數(shù),該executor函數(shù)由Promise實(shí)現(xiàn)立即執(zhí)行
resolve函數(shù)由 JavaScript 引擎提供，不用自己部署。
