JS 事件環

JS 程序的運行是離不開事件環機制的，這個機制保證在發生某些事情的時候我們有機會執行一個我們事先預定好的函數，事情發生的時候 JS 會將相應的函數入棧執行然后出棧，但是關于事件環我們還有一些未知的東西，例如，setTimeout 我們習慣稱他為定時器，但是可能很多人沒有意識到，這個東西和我們常用的一些事件沒什么不同，只不過我們通常所說的事件大多需要用戶觸發，而 setTimeout 不用用戶自己觸發，而是指定時間之后觸發；那么問題來了，如果我們將時間設置為 0 會發生什么？會立即執行么？

setTimeout、DOM或者 HTTP請求這部分其實并不在 v8 引擎中，這些屬于 web API，javascript 是一個單線程的語言，也就意味著一次只能做一件事情，這個事實從未改變

執行原理

JS 中所有的方法都會被推入棧中執行，執行完成被彈出，在遇到異步代碼的時候，例如 setTimeout MutationObserver Promise 異步的部分會由其他掌管 webAPI 的地方執行，等異步有結果之后，回調函數會進入相應的隊列，Promise MutationObserver 回調進入微任務隊列，setTimeout setInterval requestAnimationFrame 進入宏任務隊列。等待主線程的執行棧空了，微任務隊列立刻被推入棧中執行，執行完畢開始執行宏任務隊列

一個經典的例子

html

<div class='outer'> <div class='inner'></div></div>

js

// Let’s get hold of those elementsvar outer = document.querySelector(’.outer’);var inner = document.querySelector(’.inner’);// Let’s listen for attribute changes on the// outer elementnew MutationObserver(function () { console.log(’mutate’);}).observe(outer, { attributes: true,});// Here’s a click listener…function onClick() { console.log(’click’); setTimeout(function () { console.log(’timeout’); }, 0); Promise.resolve().then(function () { console.log(’promise’); }); outer.setAttribute(’data-random’, Math.random());}// …which we’ll attach to both elementsinner.addEventListener(’click’, onClick);outer.addEventListener(’click’, onClick);

以上代碼在，手動點擊 inner 元素的時候會有如下輸出

clickpromisemutateclickpromisemutatetimeouttimeout

截止 2020年8月份 chrome edge opera firefox 的結果是統一的，但是在此之前的版本可能會有不同的輸出。

一個奇怪的現象

上述代碼我們不使用手動觸發點擊，而是使用 inner.click() 觸發點擊，其結果會有很大的不同

clickclickpromisemutatepromisetimeouttimeout

造成以上巨大差異的原因是，手動點擊，不是通過函數進入執行棧的方式觸發點擊事件的回調，所以inner 的回調執行完了主線程中的執行棧就是空的可以直接執行隊列中任務，然后事件冒泡導致的回調函數才被推入棧運行；而 click 方法的點擊則是通過將 click 推入棧中執行來達到的，inner 的點擊回調執行完了之后 click 方法并沒有被彈出棧，而是直接執行冒泡的下一個回調，由于下一個回調有一個重復的 屬性設置 這是不會重復觸發 MutationObserver的所以 mutate 的輸出只會有一個。等所有的冒泡回調被執行完畢 click 函數才會被彈出棧。

最后注意，瀏覽器會盡量預先執行較為敏感的操作。

以上就是淺談javascript事件環微任務和宏任務隊列原理的詳細內容，更多關于JavaScript 事件環的資料請關注好吧啦網其它相關文章！