淺談JavaScript中的事件循環(huán)機(jī)制

Pluser 發(fā)布于2019-08-23 15:22 / 3144人閱讀

摘要：事件循環(huán)背景是一門單線程非阻塞的腳本語言，單線程意味著，代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線程來處理所有的任務(wù)。在意識(shí)到該問題之際，新特性中的可以讓成為一門多線程語言，但實(shí)際開發(fā)中使用存在著諸多限制。這個(gè)地方被稱為執(zhí)行棧。

事件循環(huán)（Event Loop） 背景

JavaScript是一門單線程非阻塞的腳本語言，單線程意味著，JavaScript代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線程來處理所有的任務(wù)。而非阻塞則是當(dāng)代碼需要進(jìn)行一項(xiàng)異步任務(wù)（無法立刻返回結(jié)果，需要花一定時(shí)間才能返回的任務(wù)，如I/O事件）的時(shí)候，主線程會(huì)掛起（pending）這個(gè)任務(wù)，然后在異步任務(wù)返回結(jié)果的時(shí)候再根據(jù)一定規(guī)則去執(zhí)行相應(yīng)的回調(diào)。
在意識(shí)到該問題之際，html5新特性中的web worker可以讓JavaScript成為一門多線程語言，但實(shí)際開發(fā)中使用web worker存在著諸多限制。

瀏覽器的Event Loop js引擎的過程 同步編程案例

思考一下這段代碼的結(jié)果？

顯然，同步函數(shù)是由上至下的執(zhí)行順序

異步編程案例

因?yàn)閟etTimeout是異步函數(shù)，js執(zhí)行機(jī)制是先將同步函數(shù)執(zhí)行完畢，再執(zhí)行異步函數(shù)

執(zhí)行棧與事件隊(duì)列

當(dāng)javascript代碼執(zhí)行的時(shí)候會(huì)將不同的變量存于內(nèi)存中的不同位置：堆（heap）和棧（stack）中來加以區(qū)分。其中，堆里存放著一些對(duì)象。而棧中則存放著一些基礎(chǔ)類型變量以及對(duì)象的指針。如下：

當(dāng)我們調(diào)用一個(gè)方法的時(shí)候，js會(huì)生成一個(gè)與這個(gè)方法對(duì)應(yīng)的執(zhí)行環(huán)境（context），又叫執(zhí)行上下文。這個(gè)執(zhí)行環(huán)境中存在著這個(gè)方法的私有作用域，上層作用域的指向，方法的參數(shù)，這個(gè)作用域中定義的變量以及這個(gè)作用域的this對(duì)象。而當(dāng)一系列方法被依次調(diào)用的時(shí)候，因?yàn)閖s是單線程的，同一時(shí)間只能執(zhí)行一個(gè)方法，于是這些方法被排隊(duì)在一個(gè)多帶帶的地方。這個(gè)地方被稱為執(zhí)行棧。
當(dāng)腳本第一次執(zhí)行的時(shí)候，js引擎會(huì)解析這段代碼，并將其中的同步代碼按照?qǐng)?zhí)行順序加入執(zhí)行棧中，然后從頭開始執(zhí)行。如果當(dāng)前執(zhí)行的是一個(gè)方法，那么js會(huì)向執(zhí)行棧中添加這個(gè)方法的執(zhí)行環(huán)境，然后進(jìn)入這個(gè)執(zhí)行環(huán)境繼續(xù)執(zhí)行其中的代碼。當(dāng)這個(gè)執(zhí)行環(huán)境中的代碼執(zhí)行完畢并返回結(jié)果后，js會(huì)退出這個(gè)執(zhí)行環(huán)境并把這個(gè)執(zhí)行環(huán)境銷毀，回到上一個(gè)方法的執(zhí)行環(huán)境。這個(gè)過程反復(fù)進(jìn)行，直到執(zhí)行棧中的代碼全部執(zhí)行完畢。

宏任務(wù)（macro taks）與微任務(wù)（micro task）

在異步函數(shù)中，可以細(xì)分為兩種任務(wù)，宏任務(wù)與微任務(wù)。
宏任務(wù)有以下幾種：
①I/O
②setTimeout
③setInterval
④setImmediate
⑤requestAnimationFrame

微任務(wù)有以下幾種：
①process.nextTick
②MutationObserver
③Promise.then catch finally

異步編程案例

當(dāng)異步函數(shù)中同時(shí)存在微任務(wù)和宏任務(wù)的時(shí)候，先執(zhí)行完微任務(wù)，再執(zhí)行宏任務(wù)

總結(jié)

瀏覽器中的事件循環(huán)機(jī)制就是js在執(zhí)行代碼時(shí)，由上至下遍歷，優(yōu)先執(zhí)行同步函數(shù)，在遇到異步函數(shù)的時(shí)候，將該任務(wù)放置執(zhí)行棧；當(dāng)任務(wù)隊(duì)列中沒有同步函數(shù)之后便開始執(zhí)行執(zhí)行棧中的異步函數(shù)，優(yōu)先執(zhí)行微任務(wù)，后執(zhí)行宏任務(wù)。
js執(zhí)行順序：同步函數(shù) -> 微任務(wù) -> 宏任務(wù)

思考題 setTimeout

console.log("script start")    
setTimeout(function(){
    console.log("settimeout")
})
console.log("script end")
    
// 輸出順序：script start->script end->settimeout

這個(gè)很簡(jiǎn)單，setTimeout中的語句會(huì)進(jìn)入宏任務(wù)，后置執(zhí)行。

promise

console.log("script start")
let promise1 = new Promise(function (resolve) {
    console.log("promise1")
    resolve()
    console.log("promise1 end")
}).then(function () {
    console.log("promise2")
})
setTimeout(function(){
    console.log("settimeout")
})
console.log("script end")

// 輸出順序: script start->promise1->promise1 end->script end->promise2->settimeout

兩個(gè)要點(diǎn)：
①promise中的then函數(shù)中代碼會(huì)進(jìn)入微任務(wù)
②promise中的resolve只是更改promise的狀態(tài)，因此后面的語句會(huì)繼續(xù)執(zhí)行。

async/await

async function async1(){
   console.log("async1 start");
    await async2();
    console.log("async1 end")
}
async function async2(){
    console.log("async2")
}

console.log("script start");
async1();
console.log("script end")

// 輸出順序：script start->async1 start->async2->script end->async1 end

async函數(shù)表示函數(shù)里面可能會(huì)有異步方法，await后面跟一個(gè)表達(dá)式，async方法執(zhí)行時(shí)，遇到await會(huì)立即執(zhí)行表達(dá)式，然后把表達(dá)式后面的代碼放到微任務(wù)隊(duì)列里，讓出執(zhí)行棧讓同步代碼先執(zhí)行

綜合測(cè)試

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    console.log("async2");
}
console.log("script start");
setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();
new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

這題不公布答案，自行答題。