快捷導(dǎo)航

關(guān)于js的事件循環(huán)機制剖析

更新時間：2021年06月02日 14:14:57 作者：yun_shuo

JS事件循環(huán)機制,最常用到的地方應(yīng)該是做面試題,經(jīng)常給出一段代碼,讓你寫出console.log()順序,下面這篇文章主要給大家介紹了關(guān)于js事件循環(huán)機制的相關(guān)資料,需要的朋友可以參考下

前言

眾所周知， JavaScript是單線程這一核心,可是瀏覽器又能很好的處理異步請求，那么到底是為什么呢？其中的原理與事件循環(huán)機制大有關(guān)系。

在探索事件循環(huán)之前，我們得先了解瀏覽器執(zhí)行線程~~

瀏覽器的渲染進程是多線程的，瀏覽器每一個tab標簽都代表一個獨立的進程，其中瀏覽器內(nèi)核屬于瀏覽器多進程中的一種，主要負責(zé)頁面渲染，腳本執(zhí)行，事件處理等。其包含的線程有以下幾種

GUI 渲染線程：負責(zé)渲染頁面，解析 HTML，CSS 構(gòu)成 DOM 樹；
JS 引擎線程：解釋執(zhí)行代碼、用戶輸入和網(wǎng)絡(luò)請求；
事件處理線程：click、mouse等交互事件發(fā)生后將事件函數(shù)放入隊列；
定時器觸發(fā)線程：等時間結(jié)束后執(zhí)行函數(shù)推入任務(wù)隊列中；
http網(wǎng)絡(luò)請求線程：處理用戶的get、post請求，返回結(jié)果推入任務(wù)隊列中。

了解了瀏覽器渲染流程，還要了解JS的運行機制。JS的運行機制就是事件循環(huán)

執(zhí)行棧

JS運行的環(huán)境稱之為宿主環(huán)境。

執(zhí)行棧：call stack，一個數(shù)據(jù)結(jié)構(gòu)，用于存放各種函數(shù)的執(zhí)行環(huán)境，每一個函數(shù)執(zhí)行之前，它的相關(guān)信息會加入到執(zhí)行棧。函數(shù)調(diào)用之前，創(chuàng)建執(zhí)行環(huán)境，然后加入到執(zhí)行棧；函數(shù)調(diào)用之后，銷毀執(zhí)行環(huán)境。

事件循環(huán)

js中所有的任務(wù)可以分為同步任務(wù)和異步任務(wù)，同步任務(wù)是立即執(zhí)行的任務(wù)，同步任務(wù)一般會直接進入到主線程中執(zhí)行；而異步任務(wù)，就是異步執(zhí)行的任務(wù)，比如ajax網(wǎng)絡(luò)請求，setTimeout 定時函數(shù)等都屬于異步任務(wù)，異步任務(wù)會通過任務(wù)隊列(先進先出)的機制來進行協(xié)調(diào)。同步和異步任務(wù)分別進入不同的執(zhí)行環(huán)境，同步的進入主線程，即主執(zhí)行棧，異步的進入任務(wù)隊列。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去任務(wù)隊列讀取對應(yīng)的任務(wù)，推入主線程執(zhí)行。這種不斷重復(fù)就是我們說的 Event Loop (事件循環(huán))。具體流程如下圖。

在事件循環(huán)中，每進行一次循環(huán)操作稱為tick，每一次 tick 的任務(wù)鍵的步驟可以總結(jié)如下：1.執(zhí)行一個宏任務(wù)（棧中沒有就從事件隊列中獲?。?.執(zhí)行過程中如果遇到微任務(wù)，就將它添加到微任務(wù)的任務(wù)隊列中；3.宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當前微任務(wù)隊列中的所有微任務(wù)（依次執(zhí)行）；4.當前宏任務(wù)執(zhí)行完畢，開始檢查渲染，然后GUI線程接管渲染；5.渲染完畢后，JS線程繼續(xù)接管，開始下一個宏任務(wù)（從事件隊列中獲?。?/p>

宏任務(wù)主要包含：script( 整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 環(huán)境)
微任務(wù)主要包含：Promise、MutaionObserver、process.nextTick(Node.js 環(huán)境)

事件循環(huán)例子

console.log('script start');
//整體 script 作為第一個宏任務(wù)進入主線程，遇到 console.log，輸出 script start
setTimeout(function() {
  console.log('setTimeout');
}, 0);
//遇到 setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù) Event Queue 中
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});
//遇到 Promise，其 then函數(shù)被分到到微任務(wù) Event Queue 中,記為 then1，之后又遇到了 then 函數(shù)，將其分到微任務(wù) Event Queue 中，記為 then2
console.log('script end');
//遇到 console.log，輸出 script end

如此，Event Queue（事件隊列）中存在三個任務(wù)：宏任務(wù)：setTimeout 微任務(wù)：then1、then2。執(zhí)行微任務(wù)首先then1，輸出 promise1, 然后執(zhí)行 then2，輸出 promise2，這樣就清空了所有微任務(wù)

執(zhí)行 setTimeout 任務(wù)，輸出 setTimeout 至此，輸出的順序是：script start, script end, promise1, promise2, setTimeout