国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js運(yùn)行機(jī)制及異步編程（二）

skinner / 1029人閱讀

摘要：的執(zhí)行機(jī)制就是一個(gè)主線程一個(gè)任務(wù)隊(duì)列。同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)，異步任務(wù)就是放在任務(wù)隊(duì)列的任務(wù)。和上述運(yùn)行的機(jī)制主要說(shuō)明的是，而的出現(xiàn)及普及，又有了新的概念，，它的出現(xiàn)，進(jìn)一步，中分為兩種任務(wù)類型和，在中，稱為，可稱為。

上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環(huán)Event loop，以及異步編程的原理
事件循環(huán)Event loop

之前文章中有講到j(luò)s是單線程的，而瀏覽器渲染內(nèi)核包含多個(gè)線程的，和js代碼部分相關(guān)的線程有如下幾個(gè)：

js引擎線程

處理ajax請(qǐng)求的線程，

處理DOM事件的線程，

定時(shí)器，

讀寫文件的線程（Node.JS）等

因?yàn)镴S是單線程的，這是從JS引擎的角度來(lái)看的，所謂的單線程就是指在JS引擎中負(fù)責(zé)解釋和執(zhí)行JS代碼的線程只有一個(gè)：主線程。

js分為同步任務(wù)和異步任務(wù)，同步任務(wù)都在主線程上執(zhí)行，就形成一個(gè)執(zhí)行棧，主線程之外，事件觸發(fā)線程管理著一個(gè)任務(wù)隊(duì)列，只要異步任務(wù)有了運(yùn)行結(jié)果，就在任務(wù)隊(duì)列中放置一個(gè)事件。一旦執(zhí)行棧中所有的同步任務(wù)執(zhí)行完畢（此時(shí)js引擎空閑），系統(tǒng)就會(huì)讀取任務(wù)隊(duì)列，將可運(yùn)行的異步任務(wù)添加到可執(zhí)行棧中，開始執(zhí)行。

JS的執(zhí)行機(jī)制就是一個(gè)主線程 + 一個(gè)任務(wù)隊(duì)列。同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)，異步任務(wù)就是放在任務(wù)隊(duì)列的任務(wù)。所有的同步任務(wù)都在主線程執(zhí)行，這構(gòu)成了一個(gè)執(zhí)行棧，異步任務(wù)有了運(yùn)行結(jié)果會(huì)在任務(wù)隊(duì)列中放置一個(gè)事件，比如定時(shí)2秒，到2秒后才能放進(jìn)任務(wù)隊(duì)列（callback放進(jìn)任務(wù)隊(duì)列，而不是setTimeout函數(shù)放進(jìn)隊(duì)列）。

事件循環(huán)（Event Loop）—— 腳本運(yùn)行時(shí)，先依次運(yùn)行執(zhí)行棧，然后從隊(duì)列中提取事件來(lái)運(yùn)行任務(wù)隊(duì)列中的任務(wù)，這個(gè)過(guò)程是不斷重復(fù)的。所以叫事件循環(huán)（Event Loop）。

macrotask和microtask

上述js運(yùn)行的機(jī)制主要說(shuō)明的是es5，而es6的出現(xiàn)及普及，又有了新的概念，promise，它的出現(xiàn)，進(jìn)一步，JS中分為兩種任務(wù)類型：macrotask和microtask，在ECMAScript中，microtask稱為jobs，macrotask可稱為task。

分別很么樣的場(chǎng)景會(huì)形成macrotask和microtask呢？

macrotask：主代碼塊，setTimeout，setInterval, setImmediate, I/O, UI rendering. 等（可以看到，事件隊(duì)列中的每一個(gè)事件都是一個(gè)macrotask）

microtask： process.nextTick, Promise(原生)，Object.observe，MutationObserver

在node環(huán)境下，process.nextTick的優(yōu)先級(jí)高于Promise，也就是可以簡(jiǎn)單理解為：在宏任務(wù)結(jié)束后會(huì)先執(zhí)行微任務(wù)隊(duì)列中的nextTickQueue部分，然后才會(huì)執(zhí)行微任務(wù)中的Promise部分。
總結(jié)下運(yùn)行機(jī)制：

執(zhí)行一個(gè)宏任務(wù)（棧中沒有就從事件隊(duì)列中獲取）

執(zhí)行過(guò)程中如果遇到微任務(wù)，就將它添加到微任務(wù)的任務(wù)隊(duì)列中

宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當(dāng)前微任務(wù)隊(duì)列中的所有微任務(wù)（依次執(zhí)行）

當(dāng)前宏任務(wù)執(zhí)行完畢，開始檢查渲染，然后GUI線程接管渲染

渲染完畢后，JS線程繼續(xù)接管，開始下一個(gè)宏任務(wù)（從事件隊(duì)列中獲取）

案例說(shuō)明

案例1：

setImmediate(function(){
    console.log(1);
},0);
setTimeout(function(){
    console.log(2);
},0);
new Promise(function(resolve){
    console.log(3);
    resolve();
    console.log(4);
}).then(function(){
    console.log(5);
});
console.log(6);
process.nextTick(function(){
    console.log(7);
});
console.log(8);

根據(jù)js的運(yùn)行原理解釋上面代碼的執(zhí)行順序：

第一步 script整體代碼被執(zhí)行，執(zhí)行過(guò)程為
創(chuàng)建setImmediate macro-task
創(chuàng)建setTimeout macro-task
創(chuàng)建micro-task Promise.then 的回調(diào)，并執(zhí)行script console.log(3); resolve(); console.log(4); 此時(shí)輸出3和4，雖然resolve調(diào)用了，執(zhí)行了但是整體代碼還沒執(zhí)行完，無(wú)法進(jìn)入Promise.then 流程。
console.log(6)輸出6
process.nextTick 創(chuàng)建micro-task
console.log(8) 輸出8
第一個(gè)過(guò)程過(guò)后，已經(jīng)輸出了3 4 6 8

第二步 由于其他micro-task 的 優(yōu)先級(jí)高于macro-task。

此時(shí)micro-task 中有兩個(gè)任務(wù)按照優(yōu)先級(jí)process.nextTick 高于 Promise。 
所以先輸出7，再輸出5

第三步 micro-task 任務(wù)列表已經(jīng)執(zhí)行完畢，家下來(lái)執(zhí)行macro-task. 由于setTimeout的優(yōu)先級(jí)高于setIImmediate，所以先輸出2，再輸出1。

參考：https://blog.csdn.net/gy_u_yg...
https://blog.csdn.net/m0_3775...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100507.html

相關(guān)文章

  • js運(yùn)行機(jī)制及異步編程（二）

    摘要：的執(zhí)行機(jī)制就是一個(gè)主線程一個(gè)任務(wù)隊(duì)列。同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)，異步任務(wù)就是放在任務(wù)隊(duì)列的任務(wù)。和上述運(yùn)行的機(jī)制主要說(shuō)明的是，而的出現(xiàn)及普及，又有了新的概念，，它的出現(xiàn)，進(jìn)一步，中分為兩種任務(wù)類型和，在中，稱為，可稱為。 上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環(huán)Event loop，以及異步編程的原理 事件循環(huán)Event loop 之前文章...

    nifhlheimr 評(píng)論0 收藏0

  • js運(yùn)行機(jī)制及異步編程（一）

    摘要：引擎的運(yùn)行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發(fā)。為了提高運(yùn)行速度，現(xiàn)代瀏覽器一般采用即時(shí)編譯即字節(jié)碼只在運(yùn)行時(shí)編譯，用到哪一行就編譯哪一行，并且把編譯結(jié)果緩存這樣整個(gè)程序的運(yùn)行速度能得到顯著提升。 相信大家在面試的過(guò)程中經(jīng)常遇到查看執(zhí)行順序的問(wèn)題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實(shí)這些問(wèn)題最...

    wudengzan 評(píng)論0 收藏0

  • js運(yùn)行機(jī)制及異步編程（一）

    摘要：引擎的運(yùn)行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發(fā)。為了提高運(yùn)行速度，現(xiàn)代瀏覽器一般采用即時(shí)編譯即字節(jié)碼只在運(yùn)行時(shí)編譯，用到哪一行就編譯哪一行，并且把編譯結(jié)果緩存這樣整個(gè)程序的運(yùn)行速度能得到顯著提升。 相信大家在面試的過(guò)程中經(jīng)常遇到查看執(zhí)行順序的問(wèn)題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實(shí)這些問(wèn)題最...

    happen 評(píng)論0 收藏0

  • 前端知識(shí)歸納

    摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲和...

    sixleaves 評(píng)論0 收藏0

  • 前端知識(shí)歸納

    摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲和...

    NotFound 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<