淺談JavaScript中的事件循環機制

Pluser 發布于2019-08-23 15:22 / 3154人閱讀

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

事件循環（Event Loop） 背景

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

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

思考一下這段代碼的結果？

顯然，同步函數是由上至下的執行順序

異步編程案例

因為setTimeout是異步函數，js執行機制是先將同步函數執行完畢，再執行異步函數

執行棧與事件隊列

當javascript代碼執行的時候會將不同的變量存于內存中的不同位置：堆（heap）和棧（stack）中來加以區分。其中，堆里存放著一些對象。而棧中則存放著一些基礎類型變量以及對象的指針。如下：

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

宏任務（macro taks）與微任務（micro task）

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

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

異步編程案例

當異步函數中同時存在微任務和宏任務的時候，先執行完微任務，再執行宏任務

總結

瀏覽器中的事件循環機制就是js在執行代碼時，由上至下遍歷，優先執行同步函數，在遇到異步函數的時候，將該任務放置執行棧；當任務隊列中沒有同步函數之后便開始執行執行棧中的異步函數，優先執行微任務，后執行宏任務。
js執行順序：同步函數 -> 微任務 -> 宏任務

思考題 setTimeout

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

這個很簡單，setTimeout中的語句會進入宏任務，后置執行。

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

兩個要點：
①promise中的then函數中代碼會進入微任務
②promise中的resolve只是更改promise的狀態，因此后面的語句會繼續執行。

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函數表示函數里面可能會有異步方法，await后面跟一個表達式，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");
setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();
new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

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

GPU云服務器云服務器 js事件循環機制 gpu 淺談javascript 事件機制事件冒泡機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101946.html

淺談不同環境下的JavaScript執行機制 + 示例詳解

摘要：如果沒有其他異步任務要處理比如到期的定時器，會一直停留在這個階段，等待請求返回結果。執行的執行事件關閉請求的，例如事件循環的每一次循環都需要依次經過上述的階段。因此，才會早于執行。 showImg(https://segmentfault.com/img/bVbnY76); 概念同步任務（Synchronous）在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務 ...

wanghui 2019-08-23 15:04 評論0 收藏0
淺談 JavaScript 運行機制

摘要：以多線程的形式，允許單個任務分成不同的部分進行運行。提供協調機制，一方面防止進程之間和線程之間產生沖突，另一方面允許進程之間和線程之間共享資源。主線程會不斷的重復上訴過程。眾所周知，js是單線程的，說到線程，我們首先來仔細辨析一下線程和進程的知識。一、進程與線程阮一峰老師的一篇文章寫的很好 cpu會給當前進程分配資源，進程是資源分配的最小單位，進程的資源會分配給線程使用，線程是C...

URLOS 2019-08-22 18:13 評論0 收藏0
淺談對JavaScript閉包的理解

摘要：關于循環和閉包當循環和閉包結合在一起時，經常會產生讓初學者覺得匪夷所思的問題。閉包是一把雙刃劍是比較難以理解和掌握的部分，它十分強大，卻也有很大的缺陷，如何使用它完全取決于你自己。在談閉包之前，我們首先要了解幾個概念：什么是函數表達式？與函數聲明有何不同？ JavaScript查找標識符的機制 JavaScript的作用域是詞法作用域 JavaScript的垃圾回收機制先來...

missonce 2019-08-20 11:02 評論0 收藏0
淺談瀏覽器多進程與JS線程

摘要：引言一直對瀏覽器的進程線程的運行一無所知，經過一次的刷刷刷相關的博客之后，對其有了初步的了解，是時候該總結一波了。瀏覽器內的進程知道了進程與線程之間的關系之后，下面是瀏覽器與進程的關系了。引言一直對瀏覽器的進程、線程的運行一無所知，經過一次的刷刷刷相關的博客之后，對其有了初步的了解，是時候該總結一波了。進程、線程之間的關系一個進程有一個或多個線程，線程之間共同完成進程分配下來的...

Juven 2019-08-26 11:33 評論0 收藏0
淺談React事件機制

摘要：事件簡介事件是合成事件，所有事件都自動綁定到最外層上。支持事件的冒泡機制，我們可以使用和來中斷它。這樣做簡化了事件處理和回收機制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個子集。 React事件簡介 React事件是合成事件，所有事件都自動綁定到最外層上。因為Virtual DOM 在內存中是以對象的形式存在的，所以React 基于 Virtual DOM 實現了...

moven_j 2019-08-02 15:29 評論0 收藏0