javascript事件環微任務和宏任務隊列原理

哈嘍！你們好！我是木瓜太香，我又來嘞，今天來講說前端面試中常常別問到的 JS 事件環問題。

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 elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

// Let's listen for attribute changes on the
// outer element
new 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 elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

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

click
promise
mutate
click
promise
mutate
timeout
timeout

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

一個奇怪的現象

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

click
click
promise
mutate
promise
timeout
timeout

形成以上巨大差別的緣由是，手動點擊，不是經過函數進入執行棧的方式觸發點擊事件的回調，因此inner 的回調執行完了主線程中的執行棧就是空的能夠直接執行隊列中任務，而後事件冒泡致使的回調函數才被推入棧運行；而 click 方法的點擊則是經過將 click 推入棧中執行來達到的，inner 的點擊回調執行完了以後 click 方法並無被彈出棧，而是直接執行冒泡的下一個回調，因爲下一個回調有一個重複的 屬性設置 這是不會重複觸發 MutationObserver的因此 mutate 的輸出只會有一個。等全部的冒泡回調被執行完畢 click 函數纔會被彈出棧。

最後注意，瀏覽器會盡可能預先執行較爲敏感的操做。

有前端問題須要討論的能夠加個人qun:237871108。也能夠經過嗶哩嗶哩搜索木瓜太香找到我。