JavaScript事件循環(huán)

Corwien 發(fā)布于2019-08-22 16:18 / 2315人閱讀

摘要：事件循環(huán)當(dāng)主線(xiàn)程中的任務(wù)執(zhí)行完畢后，會(huì)從任務(wù)隊(duì)列中獲取任務(wù)一個(gè)個(gè)的放在棧中執(zhí)行去執(zhí)行，這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱(chēng)為事件循環(huán)。

寫(xiě)在前面

說(shuō)起javascript（以下簡(jiǎn)稱(chēng)js）這門(mén)語(yǔ)言，相信大家已經(jīng)非常熟悉了，不管是前端開(kāi)發(fā)還是后端開(kāi)發(fā)幾乎無(wú)時(shí)無(wú)刻都要跟它打交道。雖說(shuō)開(kāi)發(fā)者每天幾乎都要操作js，但是你真的確定你掌握了js的運(yùn)行機(jī)制嗎！下面我們就來(lái)聊聊這話(huà)題。

JavaScript運(yùn)行機(jī)制圖解

上圖我們可以分為兩部分：瀏覽器中的JS引擎和運(yùn)行環(huán)境Runtime，那它們的區(qū)別是什么？

JS引擎：編譯并執(zhí)行代碼的地方。

如上圖中可以看出JS引擎分為兩大核心部分：棧和堆

棧（Stack）:js代碼的執(zhí)行都要壓到此棧中執(zhí)行。

堆：存放對(duì)象、數(shù)組的地方，js垃圾回收就是檢查這里。

Runtime：瀏覽器的運(yùn)行環(huán)境，它提供了一些對(duì)外接口供JS調(diào)用，如網(wǎng)絡(luò)請(qǐng)求接口。

JavaScript引擎是單線(xiàn)程的

JS引擎是單線(xiàn)程的，也就是說(shuō)在一個(gè)時(shí)間段內(nèi)，事情只能一件一件的按先后順序去做，第一件事沒(méi)做完就不能第二件事。那么在js引擎中負(fù)責(zé)解釋和執(zhí)行js代碼的線(xiàn)程只有一個(gè)，我們可以稱(chēng)之為主線(xiàn)程。

當(dāng)然瀏覽器的運(yùn)行環(huán)境Runtime還提供一些其他的線(xiàn)程，如定時(shí)器線(xiàn)程、ajax線(xiàn)程、事件線(xiàn)程、網(wǎng)絡(luò)請(qǐng)求和UI渲染的線(xiàn)程，為了和js主線(xiàn)程分開(kāi)，我們這里都統(tǒng)稱(chēng)它們?yōu)?b>工作線(xiàn)程。

由于瀏覽器是多線(xiàn)程的，所以工作線(xiàn)程和js主線(xiàn)程都可以執(zhí)行任務(wù)，線(xiàn)程間互不干擾。

JavaScript同步（異步）任務(wù)

在JavaScript任務(wù)可以分為兩種：

同步任務(wù)：在主線(xiàn)程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)，若前一個(gè)任務(wù)耗費(fèi)很長(zhǎng)時(shí)間，則后面的任務(wù)會(huì)一直處于等待狀態(tài)，即阻塞狀態(tài)。

異步任務(wù)：在棧執(zhí)行代碼的過(guò)程中，如遇到異步函數(shù)，如setTimeout、異步Ajax、事件處理程序，會(huì)將這些異步代碼交給瀏覽器的工作線(xiàn)程來(lái)處理，我們把這些任務(wù)稱(chēng)之為異步任務(wù)。異步任務(wù)是不進(jìn)入主線(xiàn)程，而是進(jìn)入任務(wù)隊(duì)列（queue task）。

什么異步函數(shù)？

異步函數(shù)通常是由發(fā)起函數(shù)和回調(diào)函數(shù)構(gòu)成的。如：

A（callback）

函數(shù)A就是發(fā)起函數(shù)

callback就是回調(diào)函數(shù)

?

它們都是在主線(xiàn)程調(diào)用的，其中發(fā)起函數(shù)用來(lái)發(fā)起異步過(guò)程，回調(diào)函數(shù)用來(lái)處理結(jié)果。

如：`setTimeout(callback,1000)`

setTimeout就是發(fā)起函數(shù)、callback就是回調(diào)函數(shù)。

如：異步的Ajax

    var xhr = new new XMLHttpRequest();
    xhr.onreadystatechange = callback; //callback為回調(diào)函數(shù)
    xhr.open("get",url,true);
    xhr.send(null); // send為發(fā)起函數(shù)

可以看出發(fā)起函數(shù)和回調(diào)函數(shù)也可以是分離的。

既然同步任務(wù)是在主線(xiàn)程中執(zhí)行的，那么異步任務(wù)何時(shí)執(zhí)行？

答：是這樣的，一旦棧中同步任務(wù)執(zhí)行完畢后，系統(tǒng)就會(huì)通過(guò)事件循環(huán)機(jī)制讀取任務(wù)隊(duì)列中的任務(wù)一個(gè)個(gè)移到棧中去執(zhí)行。

事件循環(huán)

當(dāng)主線(xiàn)程中的任務(wù)執(zhí)行完畢后，會(huì)從任務(wù)隊(duì)列中獲取任務(wù)一個(gè)個(gè)的放在棧中執(zhí)行去執(zhí)行，這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱(chēng)為事件循環(huán)。

棧

在js中，代碼最終都是在棧中執(zhí)行的，棧結(jié)構(gòu)的特點(diǎn)是：先進(jìn)后出，后進(jìn)先出。

我們來(lái)看下面代碼的運(yùn)行結(jié)果：

function bar(){
    console.log(1);
    foo();
}

function foo(){
    par();
    console.log(3);
}

function par(){
    setTimeout(function(){
        console.log(2);
    },0);
}

bar();

運(yùn)行的最終結(jié)果是：132。為什么結(jié)果不是123呢？

下我們來(lái)分析下代碼運(yùn)行時(shí)入棧和出棧的過(guò)程。

首先當(dāng)調(diào)用函數(shù)bar()時(shí)，此函數(shù)就會(huì)先入棧，其內(nèi)部的console.log(1)也會(huì)隨之入棧執(zhí)行。

執(zhí)行完console.log(1)后，就要出棧，于是控制臺(tái)先打印出結(jié)果1，只剩下bar()在棧中。接著再執(zhí)行函數(shù)bar內(nèi)部的函數(shù)foo，于是函數(shù)foo也開(kāi)心的入棧了。

執(zhí)行函數(shù)foo的內(nèi)部代碼，調(diào)用函數(shù)par()，于是函數(shù)par()也要跟著入棧。

由于函數(shù)par()內(nèi)部執(zhí)行遇到了異步函數(shù)setTimeout,異步函數(shù)則會(huì)由瀏覽器的Runtime運(yùn)行環(huán)境的工作線(xiàn)程來(lái)處理，等定時(shí)器設(shè)置的時(shí)間到達(dá)就會(huì)被放到任務(wù)隊(duì)列中，此時(shí)棧的同步任務(wù)繼續(xù)執(zhí)行。

接著在執(zhí)行par函數(shù)中的console.log(3),控制臺(tái)打印結(jié)果為3 ,此時(shí)棧的代碼執(zhí)行完畢后，會(huì)按照棧的特點(diǎn)進(jìn)行

先進(jìn)后出，后進(jìn)先出順序進(jìn)行出棧。出棧順序：先函數(shù)par()-->后函數(shù)foo()-->最后函數(shù)bar。

最后只剩下異步任務(wù)，由主線(xiàn)程去獲取任務(wù)隊(duì)列中的任務(wù)放在棧中去執(zhí)行。也可以認(rèn)為棧中的同步代碼執(zhí)行總是在讀取異步任務(wù)之前執(zhí)行。

最后執(zhí)行setTimeout中的回調(diào)函數(shù)：結(jié)果控制臺(tái)輸出為2。

setTimeout(function(){
        console.log(2);
},0);

所以代碼的最終運(yùn)行結(jié)果為132。

小結(jié)

js引擎是單線(xiàn)程執(zhí)行js代碼，同步任務(wù)在棧中按順序執(zhí)行，如果某一個(gè)同步任務(wù)沒(méi)有執(zhí)行完畢，則后面的代碼將會(huì)處于阻塞等待狀態(tài)

棧中若執(zhí)行遇到了異步任務(wù)（如定時(shí)器、異步Ajax、事件），會(huì)將此異步任務(wù)通過(guò)瀏覽器對(duì)應(yīng)的工作線(xiàn)程來(lái)處理。

工作線(xiàn)程中的所有異步任務(wù)均會(huì)按照設(shè)定的時(shí)間進(jìn)行等待，時(shí)間一到會(huì)被加入任務(wù)隊(duì)列。如果是異步ajax,則等待其返回結(jié)果后在加入到任務(wù)隊(duì)列

當(dāng)棧中為空時(shí)，會(huì)通過(guò)事件循環(huán)來(lái)一個(gè)個(gè)獲取任務(wù)隊(duì)列中的任務(wù)放到棧中進(jìn)行逐個(gè)運(yùn)行。即棧中的同步任務(wù)總是在讀取異步任務(wù)之前執(zhí)行

定時(shí)器設(shè)置的時(shí)間不一定按照設(shè)定的時(shí)間進(jìn)行執(zhí)行，這得取決于棧中同步任務(wù)耗費(fèi)的時(shí)間。因?yàn)闂Ｖ袌?zhí)行的同步任務(wù)如果耗費(fèi)很長(zhǎng)時(shí)間，則會(huì)影響到異步任務(wù)回調(diào)函數(shù)的執(zhí)行。