概念理解

關(guān)于JS

JS是一門單線程語言，在最新的HTML5中提出了Web-Worker，但JS是單線程這一核心仍未改變。所以一切JS版的"多線程"都是用單線程模擬出來的。

多線程/單線程的簡單理解

• 多線程: 程序可以同一時間做幾件事。

• 單線程: 程序同一時間只能做一件事。

JS為什么是單線程的？

JavaScript語言的一大特點(diǎn)就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。

JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復(fù)雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節(jié)點(diǎn)上添加內(nèi)容，另一個線程刪除了這個節(jié)點(diǎn)，這時瀏覽器應(yīng)該以哪個線程為準(zhǔn)？

所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成了這門語言的核心特征，將來也不會改變。

為了利用多核CPU的計算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個新標(biāo)準(zhǔn)并沒有改變JavaScript單線程的本質(zhì)。

JS為什么需要異步?

如果JS中不存在異步，只能自上而下執(zhí)行，如果上一行解析時間很長，那么下面的代碼就會被阻塞。對于用戶而言，阻塞就意味著"卡死"，這樣就導(dǎo)致了很差的用戶體驗(yàn)。

JS單線程又是如何實(shí)現(xiàn)異步的呢？

既然JS是單線程的，只能在一條線程上執(zhí)行，又是如何實(shí)現(xiàn)的異步呢？是通過的事件循環(huán)(event loop)，理解了event loop機(jī)制，就理解了JS的執(zhí)行機(jī)制。理解事件循環(huán)機(jī)制前，我們先來看看任務(wù)隊(duì)列。

任務(wù)隊(duì)列

"任務(wù)隊(duì)列"是一個事件的隊(duì)列（也可以理解成消息的隊(duì)列），IO設(shè)備完成一項(xiàng)任務(wù)，就在"任務(wù)隊(duì)列"中添加一個事件，表示相關(guān)的異步任務(wù)可以進(jìn)入"執(zhí)行棧"了。主線程讀取"任務(wù)隊(duì)列"，就是讀取里面有哪些事件。"任務(wù)隊(duì)列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件（比如鼠標(biāo)點(diǎn)擊、頁面滾動等等）。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時就會進(jìn)入"任務(wù)隊(duì)列"，等待主線程讀取。

所謂"回調(diào)函數(shù)"（callback），就是那些會被主線程掛起來的代碼。異步任務(wù)必須指定回調(diào)函數(shù)，當(dāng)主線程開始執(zhí)行異步任務(wù)，就是執(zhí)行對應(yīng)的回調(diào)函數(shù)。

"任務(wù)隊(duì)列"是一個先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，排在前面的事件，優(yōu)先被主線程讀取。主線程的讀取過程基本上是自動的，只要執(zhí)行棧一清空，"任務(wù)隊(duì)列"上第一位的事件就自動進(jìn)入主線程。

但是，由于存在后文提到的"定時器"功能，主線程首先要檢查一下執(zhí)行時間，某些事件只有到了規(guī)定的時間，才能返回主線程。讀取到一個異步任務(wù)，首先是將異步任務(wù)放進(jìn)事件表格（Event table）中，當(dāng)放進(jìn)事件表格中的異步任務(wù)完成某種事情或者說達(dá)成某些條件（如setTimeout事件到了，鼠標(biāo)點(diǎn)擊了，數(shù)據(jù)文件獲取到了）之后，才將這些異步任務(wù)推入事件隊(duì)列（Event Queue)中，這時候的異步任務(wù)才是執(zhí)行棧中空閑的時候才能讀取到的異步任務(wù)。

JS的執(zhí)行機(jī)制-->事件循環(huán)（Event Loop）

主線程從"任務(wù)隊(duì)列"中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運(yùn)行機(jī)制又稱為Event Loop（事件循環(huán)）。Event Loop是JS的執(zhí)行機(jī)制。

setTimeout(fn,0)

setTimeout(fn,0)的含義是，指定某個任務(wù)在主線程最早可得的空閑時間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事件都處理完，才會得到執(zhí)行。

HTML5標(biāo)準(zhǔn)規(guī)定了setTimeout()的第二個參數(shù)的最小值（最短間隔），不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。

另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼（執(zhí)行棧）執(zhí)行完，主線程才會去執(zhí)行它指定的回調(diào)函數(shù)。要是當(dāng)前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會在setTimeout()指定的時間執(zhí)行。

JS的同步和異步

單線程的不足

單線程就意味著，所有任務(wù)需要排隊(duì)，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)， 簡單理解就是排好隊(duì)一個一個來。如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。如果排隊(duì)是因?yàn)橛嬎懔看?，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因?yàn)镮O設(shè)備（輸入輸出設(shè)備）很慢（比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù)），不得不等著結(jié)果出來，再往下執(zhí)行。

同步和異步解決單線程的不足

JavaScript語言的設(shè)計者意識到，這時主線程完全可以不管IO設(shè)備，掛起處于等待中的任務(wù)，先運(yùn)行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果，再回過頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。

于是，所有任務(wù)可以分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)；異步任務(wù)指的是，不進(jìn)入主線程、而進(jìn)入"任務(wù)隊(duì)列"（task queue）的任務(wù)，只有"任務(wù)隊(duì)列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進(jìn)入主線程執(zhí)行。

通過一個小例子來理解：

下課后甲、乙、丙、小明、丁5個人一起到食堂排隊(duì)打飯，排好隊(duì)一個一個來。小明發(fā)現(xiàn)就他忘記帶飯卡了，為了不影響后邊的同學(xué)打飯，于是小明離開了隊(duì)伍，在一旁等同學(xué)把他的飯卡帶來，他再打飯。這里的排隊(duì)相當(dāng)于js的執(zhí)行棧，排隊(duì)打飯這件事就是同步。小明等同學(xué)送飯卡來這件事就是異步。通過飯卡劃分了同步和異步。小明只有滿足了有飯卡這個條件，通知阿姨他有飯卡了。食堂阿姨優(yōu)先給甲乙丙丁打飯，最后再給小明打飯。

其實(shí)同步和異步，無論如何，做事情的時候都是只有一條流水線（單線程 [js就是單線程的,不會變]），同步和異步的差別就在于這條流水線上各個流程的執(zhí)行順序不同，先執(zhí)行同步任務(wù)，最后再來執(zhí)行異步任務(wù)。

異步任務(wù)又分為宏任務(wù)和微任務(wù)

宏任務(wù)（macro task）

• 定時器；
• 事件綁定；
• ajax；
• 回調(diào)函數(shù)；
• Node中fs可以進(jìn)行異步的I/O操作；

微任務(wù)（micro task）

• Promise(async/await) ?=> Promise并不是完全的同步，在promise中是同步任務(wù)，執(zhí)行resolve或者reject回調(diào)的時候，此時是異步操作，會先將then/catch等放到微任務(wù)隊(duì)列。當(dāng)主棧完成后，才會再去調(diào)用resolve/reject方法執(zhí)行；

• Process.nextTick （node中實(shí)現(xiàn)的api，把當(dāng)前任務(wù)放到主棧最后執(zhí)行，當(dāng)主棧執(zhí)行完，先執(zhí)行nextTick，再到等待隊(duì)列中找）；

• MutationObserver ? （創(chuàng)建并返回一個新的 MutationObserver 它會在指定的DOM發(fā)生變化時被調(diào)用）；

執(zhí)行順序優(yōu)先級：SYNC => MICRO => MACRO。

所有JS中的異步編程僅僅是根據(jù)某些機(jī)制來管控任務(wù)的執(zhí)行順序，不存在同時執(zhí)行兩個任務(wù)這一說法。

console.log("同步任務(wù)1");

function?asyn(mac)?{
????console.log("同步任務(wù)2");
????if?(mac)?{
????????console.log(mac);

????}
????return?new?Promise((resolve,?reject)?=>?{
????????console.log("Promise中的同步任務(wù)");
????????resolve("Promise中回調(diào)的異步微任務(wù)")
????})
}
setTimeout(()?=>?{
????console.log("異步任務(wù)中的宏任務(wù)");
????setTimeout(()?=>?{
????????console.log("定時器中的定時器（宏任務(wù)）");

????},?0)
????asyn("定時器傳遞任務(wù)").then(res?=>?{
????????console.log('定時器中的:',?res);
????})
},?0)
asyn().then(res?=>?{
????console.log(res);
})
console.log("同步任務(wù)3")

輸出結(jié)果依次為：

//?同步任務(wù)1
//?同步任務(wù)2
//?Promise中的同步任務(wù)
//?同步任務(wù)3
//?Promise中回調(diào)的異步微任務(wù)
//?異步任務(wù)中的宏任務(wù)
//?同步任務(wù)2
//?定時器傳遞任務(wù)
//?Promise中的同步任務(wù)
//?定時器中的:?Promise中回調(diào)的異步微任務(wù)
//?定時器中的定時器（宏任務(wù)）

先輸出“同步任務(wù)1”，往下遇到setTimeout異步宏任務(wù)，先放到宏任務(wù)隊(duì)列中掛起，往下遇到同步任務(wù)asyn()，執(zhí)行asyn函數(shù)，輸出函數(shù)中的“同步任務(wù)2”，返回Promise，輸出“Promise中的同步任務(wù)”，遇到resolve()回調(diào)函數(shù)，.then函數(shù)塊屬于異步微任務(wù)，先放到微任務(wù)隊(duì)列中掛起，往下執(zhí)行，輸出“同步任務(wù)3”，至此，同步任務(wù)執(zhí)行結(jié)束，執(zhí)行棧為空。

先執(zhí)行微任務(wù)隊(duì)列.then函數(shù)塊，輸出“Promise中回調(diào)的異步微任務(wù)”，此時微任務(wù)隊(duì)列為空。

然后看下定時器模塊時間是否到了，到了就執(zhí)行宏任務(wù)隊(duì)列，先輸出“異步任務(wù)中的宏任務(wù)”，遇到里層定時器，先放到宏任務(wù)隊(duì)列，往下執(zhí)行，調(diào)用函數(shù)asyn,執(zhí)行里面的同步任務(wù)，輸出“同步任務(wù)2”，在輸出“定時器傳遞的任務(wù)”，返回Promise，執(zhí)行promise中的同步代碼，輸出“Promise中的同步任務(wù)”，遇到.then，先放到微任務(wù)隊(duì)列。此時，執(zhí)行棧又為空。

先執(zhí)行微任務(wù)隊(duì)列，輸出 “定時器中的：Promise中回調(diào)的異步微任務(wù)”，此時微任務(wù)隊(duì)列為空。執(zhí)行宏任務(wù)，輸出“定時器中的定時器（宏任務(wù)）”。程序執(zhí)行完畢。