JS中內(nèi)部事件機(jī)制之單線程的示例分析-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、民權(quán)ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的民權(quán)網(wǎng)站制作公司

任務(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ù)，語(yǔ)句只按語(yǔ)句先后順序執(zhí)行，前面未執(zhí)行完，不會(huì)執(zhí)行后面語(yǔ)句。

異步任務(wù)，語(yǔ)句不在語(yǔ)句先后順序上執(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/

通過(guò)鼠標(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)階--通過(guò)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() 語(yǔ)句的作用域還沒(méi)有退棧，主線程調(diào)用棧不是空的，導(dǎo)致 jobs 隊(duì)列任務(wù)不會(huì)執(zhí)行，mutate 和 promise 語(yǔ)句都未能在事件循環(huán)中執(zhí)行到。從而執(zhí)行了 outer 的 onClick 函數(shù)。outer 的 onClick 函數(shù)執(zhí)行完成后，inner.click() 語(yǔ)句才退棧，繼而執(zhí)行 jobs 的任務(wù)。

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：JS中內(nèi)部事件機(jī)制之單線程的示例分析-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://bm7419.com/article22/dicicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化、云服務(wù)器、企業(yè)建站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)