js異步機(jī)制

Invoker 發(fā)布于2019-08-23 14:19 / 782人閱讀

摘要：所以在瀏覽器的幫助下，作為一種單線程語言，可以實(shí)現(xiàn)異步操作。每個(gè)異步任務(wù)都和一個(gè)回調(diào)函數(shù)相關(guān)聯(lián)。主線程執(zhí)行同步任務(wù)的同時(shí)，子線程執(zhí)行異步任務(wù)，并將相應(yīng)的結(jié)果事件放入任務(wù)隊(duì)列。

前言

js引擎不是獨(dú)立運(yùn)行的，它運(yùn)行在宿主環(huán)境中，這個(gè)環(huán)境可以是瀏覽器、可以是服務(wù)器，或者其他硬件設(shè)施。所以在瀏覽器的幫助下，js作為一種單線程語言，可以實(shí)現(xiàn)異步操作。

瀏覽器內(nèi)核是多線程的，幾個(gè)常駐的線程：渲染引擎線程、js引擎線程、定時(shí)觸發(fā)器線程、事件觸發(fā)線程、異步http請(qǐng)求線程。

并發(fā)模型

MDN-并發(fā)模型

左邊的棧存儲(chǔ)的是同步任務(wù)。右邊的堆用來存儲(chǔ)聲明的變量、對(duì)象。下面的隊(duì)列就是任務(wù)隊(duì)列，一旦某個(gè)異步任務(wù)有了響應(yīng)就會(huì)被推入隊(duì)列中。每個(gè)異步任務(wù)都和一個(gè)回調(diào)函數(shù)相關(guān)聯(lián)。

一個(gè)js程序的單線程用來執(zhí)行棧中的同步任務(wù)，當(dāng)所有同步任務(wù)執(zhí)行完畢后，棧被清空，然后讀取任務(wù)隊(duì)列中的一個(gè)待處理任務(wù)，并把相關(guān)回調(diào)函數(shù)壓入棧中，單線程開始執(zhí)行新的同步任務(wù)，執(zhí)行完畢。

單線程從任務(wù)隊(duì)列中讀取任務(wù)是不斷循環(huán)的，每次棧被清空后，都會(huì)在任務(wù)隊(duì)列中讀取新的任務(wù)，如果沒有新的任務(wù)，就會(huì)等待，直到有新的任務(wù)，這就叫任務(wù)循環(huán)或者事件循環(huán)

事件循環(huán)(Event Loop)

事件循環(huán)的大致流程如下：

主線程執(zhí)行所有同步任務(wù)，形成一個(gè)執(zhí)行棧（并發(fā)模型中的stack）。

主線程執(zhí)行同步任務(wù)的同時(shí)，子線程執(zhí)行異步任務(wù)，并將相應(yīng)的結(jié)果（事件）放入任務(wù)隊(duì)列。

一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取任務(wù)隊(duì)列，把任務(wù)隊(duì)列中事件相應(yīng)的回調(diào)函數(shù)壓入棧內(nèi)開始執(zhí)行。

執(zhí)行回調(diào)后，棧空，繼續(xù)重復(fù)第三步，形成一個(gè)循環(huán)。

Macrotask(task)

(macro)task（又稱之為宏任務(wù)），可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個(gè)宏任務(wù)（包括每次從事件隊(duì)列中獲取一個(gè)事件回調(diào)并放到執(zhí)行棧中執(zhí)行）。

瀏覽器為了能夠使得JS內(nèi)部(macro)task與DOM任務(wù)能夠有序的執(zhí)行，會(huì)在一個(gè)(macro)task執(zhí)行結(jié)束后，在下一個(gè)(macro)task 執(zhí)行開始前，對(duì)頁(yè)面進(jìn)行重新渲染。

(macro)task主要包含：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環(huán)境)

microtask

microtask（又稱為微任務(wù)），可以理解是在當(dāng)前 task 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)。也就是說，在當(dāng)前task任務(wù)后，下一個(gè)task之前，在渲染之前。

所以它的響應(yīng)速度相比setTimeout（setTimeout是task）會(huì)更快，因?yàn)闊o需等渲染。也就是說，在某一個(gè)macrotask執(zhí)行完后，就會(huì)將在它執(zhí)行期間產(chǎn)生的所有microtask都執(zhí)行完畢（在渲染前）。

microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 環(huán)境)