JS 事件環(huán)

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

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

執(zhí)行原理

JS 中所有的方法都會(huì)被推入棧中執(zhí)行，執(zhí)行完成被彈出，在遇到異步代碼的時(shí)候，例如 setTimeout MutationObserver Promise 異步的部分會(huì)由其他掌管 webAPI 的地方執(zhí)行，等異步有結(jié)果之后，回調(diào)函數(shù)會(huì)進(jìn)入相應(yīng)的隊(duì)列，Promise MutationObserver 回調(diào)進(jìn)入微任務(wù)隊(duì)列，setTimeout setInterval requestAnimationFrame 進(jìn)入宏任務(wù)隊(duì)列。等待主線程的執(zhí)行?？樟?，微任務(wù)隊(duì)列立刻被推入棧中執(zhí)行，執(zhí)行完畢開始執(zhí)行宏任務(wù)隊(duì)列

一個(gè)經(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);

以上代碼在，手動(dòng)點(diǎn)擊 inner 元素的時(shí)候會(huì)有如下輸出

click
promise
mutate
click
promise
mutate
timeout
timeout

截止 2020年8月份 chrome edge opera firefox 的結(jié)果是統(tǒng)一的，但是在此之前的版本可能會(huì)有不同的輸出。

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

上述代碼我們不使用手動(dòng)觸發(fā)點(diǎn)擊，而是使用 inner.click() 觸發(fā)點(diǎn)擊，其結(jié)果會(huì)有很大的不同

click
click
promise
mutate
promise
timeout
timeout

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

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

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

最新評(píng)論