JS中內(nèi)部事件機(jī)制之單線程的示例分析

這篇文章主要為大家展示了“JS中內(nèi)部事件機(jī)制之單線程的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS中內(nèi)部事件機(jī)制之單線程的示例分析”這篇文章吧。

任務(wù)隊(duì)列

主線程：正在執(zhí)行的代碼，會(huì)生成函數(shù)調(diào)用棧。

• macro-task（宏任務(wù)，新名：task）包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。

• micro-task（微任務(wù)，新名：jobs）包括: process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性，隊(duì)列中只能有一個(gè))

任務(wù)分類

同步任務(wù)，語句只按語句先后順序執(zhí)行，前面未執(zhí)行完，不會(huì)執(zhí)行后面語句。

異步任務(wù)，語句不在語句先后順序上執(zhí)行，執(zhí)行到該代碼時(shí)，加入到相應(yīng)任務(wù)隊(duì)列，延后執(zhí)行。

單線程

主線程從 script (整體代碼)開始第一次循環(huán)。之后全局上下文進(jìn)入函數(shù)調(diào)用棧。直到調(diào)用棧清空(只剩全局)，然后執(zhí)行所有的 jobs。當(dāng)所有可執(zhí)行的 jobs 執(zhí)行完畢之后。循環(huán)再次從 task 開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，然后再執(zhí)行所有的 jobs，這樣一直循環(huán)下去。

注意事項(xiàng)

• setTimeout 最小間隔不能低于 4 毫秒，否則會(huì)自動(dòng)增加。

• DOM 的渲染每 16 毫秒執(zhí)行一次，因?yàn)轱@示器是 60 Hz，16ms 刷新一次。

• process.nextTick 任務(wù)會(huì)在 jobs 里單獨(dú)維護(hù)一個(gè)隊(duì)列，并且在其他 jobs 任務(wù)之前執(zhí)行。

• 冒泡事件會(huì)直接在子元素事件執(zhí)行完成后，插入在主線程中。如果主線程不為空，那么會(huì)優(yōu)先于 jobs 執(zhí)行。

經(jīng)典示例

示例詳解：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

通過鼠標(biāo)點(diǎn)擊

<div class="outer">
 <div class="inner"></div>
</div>
// 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);
// 輸出結(jié)果
click
mutate
click
mutate
promise
promise
timeout
timeout

進(jìn)階--通過js執(zhí)行

<div class="outer">
 <div class="inner"></div>
</div>
// 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();
// 輸出結(jié)果
click
click
mutate
promise
promise
timeout
timeout

由于點(diǎn)擊事件是 js 執(zhí)行的，inner 的 onClick 函數(shù)執(zhí)行完成時(shí)，inner.click() 語句的作用域還沒有退棧，主線程調(diào)用棧不是空的，導(dǎo)致 jobs 隊(duì)列任務(wù)不會(huì)執(zhí)行，mutate 和 promise 語句都未能在事件循環(huán)中執(zhí)行到。從而執(zhí)行了 outer 的 onClick 函數(shù)。outer 的 onClick 函數(shù)執(zhí)行完成后，inner.click() 語句才退棧，繼而執(zhí)行 jobs 的任務(wù)。

只有一個(gè) mutate 是由于 jobs 隊(duì)列中，只能有一個(gè) MutationObserver 任務(wù)，第二次創(chuàng)建時(shí)，前一個(gè) MutationObserver 任務(wù)沒有執(zhí)行，顧不再創(chuàng)建。

以上是“JS中內(nèi)部事件機(jī)制之單線程的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！