JS 事件環(huán)

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

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

執(zhí)行原理

JS 中所有的方法都會被推入棧中執(zhí)行，執(zhí)行完成被彈出，在遇到異步代碼的時候，例如 setTimeout MutationObserver Promise 異步的部分會由其他掌管 webAPI 的地方執(zhí)行，等異步有結果之后，回調(diào)函數(shù)會進入相應的隊列，Promise MutationObserver 回調(diào)進入微任務隊列，setTimeout setInterval requestAnimationFrame 進入宏任務隊列。等待主線程的執(zhí)行?？樟耍⑷蝿贞犃辛⒖瘫煌迫霔Ｖ袌?zhí)行，執(zhí)行完畢開始執(zhí)行宏任務隊列

一個經(jīng)典的例子

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 的結果是統(tǒng)一的，但是在此之前的版本可能會有不同的輸出。

一個奇怪的現(xiàn)象

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

click
click
promise
mutate
promise
timeout
timeout

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

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

以上就是淺談javascript事件環(huán)微任務和宏任務隊列原理的詳細內(nèi)容，更多關于JavaScript 事件環(huán)的資料請關注腳本之家其它相關文章！

最新評論