JavaScript事件循環(huán)

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

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

寫在前面

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

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

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

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

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

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

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

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

JavaScript引擎是單線程的

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

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

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

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

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

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

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

什么異步函數(shù)？

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

A（callback）

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

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

?

它們都是在主線程調(diào)用的，其中發(fā)起函數(shù)用來發(fā)起異步過程，回調(diào)函數(shù)用來處理結(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ù)是在主線程中執(zhí)行的，那么異步任務(wù)何時執(zhí)行？

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

事件循環(huán)

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

棧

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

我們來看下面代碼的運(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呢？

下我們來分析下代碼運(yùn)行時入棧和出棧的過程。

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

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

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

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

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

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

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

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

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

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

小結(jié)

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

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

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

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

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

GPU云服務(wù)器云服務(wù)器 python事件循環(huán) js事件循環(huán)機(jī)制 gpu javascript循環(huán) 嵌套循環(huán)javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94222.html

發(fā)表評論

登陸后可評論

0條評論

Corwien

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2566·2023-04-25 18:13
【Microsoft Azure 的1024種玩法】四. 利用Azure Virtual machi

閱讀 780·2021-11-22 12:10
Sedo交易榜：VYNX.com超13萬元成交！crydo.com約10萬元易主！

閱讀 2977·2021-11-22 11:57
[黑五]HostKvm香港招牌VPS永久6折,充$50送$5

閱讀 2142·2021-11-19 11:26
如何登錄到虛擬主機(jī)-虛擬主機(jī)怎么登陸圖解？

閱讀 2174·2021-09-22 15:40
云安卓ARM開發(fā)板方案

閱讀 1463·2021-09-03 10:28
使用 nuxt+iview-admin+koa2 開發(fā)項(xiàng)目

閱讀 2707·2019-08-30 15:53
一道面試題引發(fā)的思考

閱讀 1954·2019-08-30 15:44

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript事件循環(huán)

相關(guān)文章

**什么是JavaScript 事件循環(huán) ?**

***JavaScript運(yùn)行機(jī)制和事件循環(huán)***

總結(jié)javascript基礎(chǔ)概念（二）：事件隊列循環(huán)

JavaScript單線程事件循環(huán)(Event Loop)那些事

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