JS內(nèi)部事件機制之單線程原理

更新時間：2018年07月02日 11:35:14 投稿：mrr

這篇文章主要介紹了JS內(nèi)部事件機制之單線程原理，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

任務(wù)隊列

主線程：正在執(zhí)行的代碼，會生成函數(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新特性，隊列中只能有一個)

任務(wù)分類

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

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

單線程

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

注意事項

setTimeout 最小間隔不能低于 4 毫秒，否則會自動增加。
DOM 的渲染每 16 毫秒執(zhí)行一次，因為顯示器是 60 Hz，16ms 刷新一次。
process.nextTick 任務(wù)會在 jobs 里單獨維護(hù)一個隊列，并且在其他 jobs 任務(wù)之前執(zhí)行。
冒泡事件會直接在子元素事件執(zhí)行完成后，插入在主線程中。如果主線程不為空，那么會優(yōu)先于 jobs 執(zhí)行。

經(jīng)典示例

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

通過鼠標(biāo)點擊

<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

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

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

總結(jié)

以上所述是小編給大家介紹的JS內(nèi)部事件機制之單線程原理，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: