瀏覽器運(yùn)行過程中會(huì)同時(shí)面對(duì)多種任務(wù)，用戶交互事件(鼠標(biāo)、鍵盤)、網(wǎng)絡(luò)請(qǐng)求、頁面渲染等。而這些任務(wù)不能是無序的，必須有個(gè)先來后到，瀏覽器內(nèi)部需要一套預(yù)定的邏輯來有序處理這些任務(wù)，因此瀏覽器事件循環(huán)誕生了，再次強(qiáng)調(diào)，是瀏覽器事件循環(huán)，不是javascript事件循環(huán)，js只是瀏覽器事件循環(huán)的參與者。

二、事件循環(huán)是什么

瀏覽器把任務(wù)區(qū)分成了 宏任務(wù) 和 微任務(wù) 或者叫 外部任務(wù) 和 內(nèi)部任務(wù) ，內(nèi)部任務(wù)可以理解為js內(nèi)部處理的任務(wù)，外部任務(wù)可以認(rèn)為是瀏覽器處理的任務(wù)。

外部隊(duì)列/宏任務(wù)隊(duì)列(Task Queue)

也可以叫宏任務(wù)隊(duì)列，瀏覽器中的外部事件源包含以下幾種：

• dom操作(頁面渲染)
• 用戶交互(鼠標(biāo)、鍵盤)
• 網(wǎng)絡(luò)請(qǐng)求(Ajax等)
• History API操作(history.back、history.go...)
• 定時(shí)器(setTimeout)

這些外部事件源可能很多，為了方便瀏覽器廠商優(yōu)化，HTML標(biāo)準(zhǔn)中明確指出一個(gè)事件循環(huán)有一個(gè)或多個(gè)外部隊(duì)列，而每一個(gè)外部事件源都有一個(gè)對(duì)應(yīng)的外部隊(duì)列。不同的時(shí)間源之間可以有不同的優(yōu)先級(jí)(例如在網(wǎng)絡(luò)時(shí)間和用戶交互之間，瀏覽器可以優(yōu)先處理鼠標(biāo)行為，從而讓用戶感覺更加流暢)。

內(nèi)部隊(duì)列/微任務(wù)隊(duì)列(Microtask Queue)

也可以叫微任務(wù)隊(duì)列，指的就是javascript語言內(nèi)部的事件隊(duì)列，在HTML標(biāo)準(zhǔn)中，并沒有明確規(guī)定這個(gè)隊(duì)列的事件源，通常認(rèn)為有以下幾種：

• Promise的成功(.then)與失敗(.catch)
• MutationObserver
• Object.observe(已廢棄)

以上三種除了第一個(gè)，其他兩個(gè)可以認(rèn)為沒有，實(shí)際上我們js中能夠使用的就只有promise。

事件循環(huán)模型

先來一張事件循環(huán)處理模型的截圖：

可以看出，每一個(gè)事件循環(huán)，從外部任務(wù)隊(duì)列中拿出一個(gè)來執(zhí)行，執(zhí)行完一個(gè)外部任務(wù)后立即執(zhí)行內(nèi)部任務(wù)隊(duì)列中所有內(nèi)部任務(wù)(清空)，然后瀏覽器執(zhí)行一次渲染，然后再次循環(huán)。

一段經(jīng)典代碼

了解了兩種隊(duì)列和事件循環(huán)的執(zhí)行模型，下面來一段經(jīng)典代碼：

// 以下代碼會(huì)得到什么樣的輸出結(jié)果？console.log('1');setTimeout(function() { console.log('2'); Promise.resolve().then(function() {console.log('3'); });}, 0);Promise.resolve().then(function() { console.log('4');}).then(function() { console.log('5');});console.log('6');

答案是：164523

執(zhí)行順序如下：

• 由于執(zhí)行當(dāng)前js代碼這個(gè)任務(wù)是一個(gè)宏任務(wù)，因此首先輸出的是"1"，
• 繼續(xù)執(zhí)行遇到setTimeou，由于setTimeout是一個(gè)外部事件源，它內(nèi)部的代碼會(huì)被push到TaskQueue中等待下一次事件循環(huán)再執(zhí)行，
• 當(dāng)執(zhí)行到promise的 then 或 catchd的時(shí)候會(huì)將他們按順序追加到本輪事件循環(huán)的末尾，
• 再繼續(xù)往下執(zhí)行輸出6，宏任務(wù)完成后清空微任務(wù)隊(duì)列中的任務(wù)，繼而輸出4、5
• 如果有的話，執(zhí)行渲染任務(wù)后，本次事件循環(huán)結(jié)束
• 開始執(zhí)行下一個(gè)宏任務(wù)，也就是第一個(gè)setTimeout中的代碼塊，輸出2，然后將promise.then添加到本輪循環(huán)末尾
• 清空微任務(wù)，輸出3

三、瀏覽器與Node.js的事件循環(huán)差異

區(qū)別對(duì)比

對(duì)于兩者的區(qū)別，來張瞟來的截圖：

這個(gè)例子的代碼如下：

setTimeout(()=>{ console.log('1'); Promise.resolve().then(function() {console.log('2'); });});setTimeout(()=>{ console.log('3'); Promise.resolve().then(function() {console.log('4'); });});

這段代碼在瀏覽器和nodejs中的輸出結(jié)果分別是什么呢？

通過前面對(duì)瀏覽事件循環(huán)的了解，你應(yīng)該很容易得出在瀏覽器中的輸出結(jié)果是: 1234

那在nodejs中的輸出結(jié)果是什么呢？結(jié)果是在nodejs的 v11.x 之前輸出1324。這之間的原因是瀏覽器有非常多的用戶交互事件，為了用戶體驗(yàn)更加流暢，必須均勻的處理宏任務(wù)和微任務(wù)，而在nodejs中由于并沒有用戶交互事件，為了保證異步事件能夠被均等的執(zhí)行，因此設(shè)計(jì)的初衷就是先清空宏任務(wù)隊(duì)列再清空微任務(wù)隊(duì)列。

不過你應(yīng)該注意到，我上面只說了在 nodejs的 v11.x 之前輸出1324，但是nodejs這個(gè)特性在社區(qū)經(jīng)歷了一波開發(fā)者的吐槽之后，node官方在 v11 這個(gè)版本緊急修復(fù)了這個(gè)問題。所以在 v11.x 以上版本執(zhí)行以上代碼會(huì)得到在瀏覽器中一樣的結(jié)果。

setImmediate

先來張瞟來的截圖：

我們?cè)賮硪粋€(gè)例子：

setTimeout(()=>{console.log('1');Promise.resolve().then(() => console.log('2'));});setTimeout(()=>{ console.log('3'); Promise.resolve().then(() => console.log('4'));});setImmediate(() => {console.log('5'); Promise.resolve().then(() => console.log('6'));});setImmediate(() => {console.log('7'); Promise.resolve().then(() => console.log('8'));});

以上代碼在nodejsV13.x中的執(zhí)行結(jié)果是12345678，接下來我們把順序調(diào)換一下,在第二個(gè)位置插入setImmediate

setTimeout(()=>{console.log('1');Promise.resolve().then(() => console.log('2'));});setImmediate(() => {console.log('3'); Promise.resolve().then(() => console.log('4'));});setTimeout(()=>{ console.log('5'); Promise.resolve().then(() => console.log('6'));});setImmediate(() => {console.log('7'); Promise.resolve().then(() => console.log('8'));});

執(zhí)行結(jié)果有一定的概率是12347856，也有一定的概率是 12563478

為啥不同的順序會(huì)得到不同的結(jié)果呢？這是由于setTImeout的精度問題導(dǎo)致的，到了這個(gè)級(jí)別的時(shí)間精度，代碼執(zhí)行的時(shí)間可能都會(huì)導(dǎo)致結(jié)果的不同。下面這張截圖是nodejs官方文檔對(duì)于事件循環(huán)順序的展示：

其中timers階段是用于執(zhí)行setTimeout事件的，check階段是用于執(zhí)行setImmediate事件的。Nodejs官方這個(gè)所謂事件循環(huán)過程，其實(shí)只是完整的事件循環(huán)中Node.js的多個(gè)外部隊(duì)列相互之間的優(yōu)先級(jí)。setTimeout是由event loop檢測(cè)系統(tǒng)時(shí)間是否到點(diǎn)然后向時(shí)間隊(duì)列插入一個(gè)事件，然后調(diào)用事件的回調(diào)方法。而setImmediate是監(jiān)控UI線程的調(diào)用棧，一旦調(diào)用棧為空則將回調(diào)壓棧。

講了這么多，其實(shí)對(duì)于上面setTimeout和setImmediate的對(duì)比結(jié)果還是有點(diǎn)模糊

推測(cè)：對(duì)于setImmediate的延時(shí)有時(shí)比setTimeout的要長(zhǎng)，由于setImmediate要先監(jiān)控調(diào)用棧，若調(diào)用棧為空才壓棧，那么在壓棧之前event loop已經(jīng)將setTimeout事件的回調(diào)函數(shù)壓棧了。

好了，以上是這次分享的所有內(nèi)容，對(duì)于后面setTimeout和setImmedate的對(duì)比沒有的出一個(gè)明確的結(jié)果，有興趣的可以一起討論。

總結(jié)

以上是生活随笔為你收集整理的5调用外部浏览器打开代码_浏览器事件循环的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。