[[413926]]

9.1 任務(wù)分類

9.1.1 廣義分類

從廣義的角度來看，任務(wù)主要分為兩種：同步任務(wù)、異步任務(wù)。

同步任務(wù)

在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)。

異步任務(wù)

不進(jìn)入主線程，而進(jìn)入“任務(wù)隊(duì)列”的任務(wù)，只有“任務(wù)隊(duì)列”通知主進(jìn)程，某個(gè)異步任務(wù)可以執(zhí)行了，該任務(wù)才會進(jìn)入主線程執(zhí)行。(注：異步任務(wù)解決的是性能問題)

拓展一下：為什么會存在異步任務(wù)?

因?yàn)閖s是單線程的，如果只有同步任務(wù)，所有任務(wù)都是在單線程中執(zhí)行的，所以每次只能執(zhí)行一個(gè)任務(wù)，而其它任務(wù)都處于等待狀態(tài)，從而造成下一個(gè)任務(wù)等待較長時(shí)間，通過異步任務(wù)就可以很好的解決這個(gè)問題。

9.1.2 精確分類

除了廣義上同步任務(wù)和異步任務(wù)這種分類外，其實(shí)有更加精確的分類：宏任務(wù)和微任務(wù)。

宏任務(wù)

宏任務(wù)主要指的是任務(wù)隊(duì)列中的這些任務(wù)，主要包含以下幾類：

(1)整體script代碼

(2)setTimeout

(3)setInterval

(4)setImmediate(Node獨(dú)有)

(5)I/O

微任務(wù)

微任務(wù)就是一個(gè)需要異步執(zhí)行的函數(shù)，執(zhí)行時(shí)機(jī)是在主函數(shù)執(zhí)行結(jié)束之后、當(dāng)前宏任務(wù)結(jié)束之前，主要包含以下幾類：(注：微任務(wù)解決的是實(shí)時(shí)性問題)

(1)process.nextTick(Node獨(dú)有)

將callback添加到下一個(gè)時(shí)間點(diǎn)的隊(duì)列;

(2)MutationObserver

使用MutationObserver監(jiān)控某個(gè)DOM節(jié)點(diǎn)，當(dāng)DOM節(jié)點(diǎn)發(fā)生變化時(shí)，就會產(chǎn)生DOM變化記錄的微任務(wù)。

(3)Promise以及以Promise為基礎(chǔ)開發(fā)出來的其它技術(shù)(注意：當(dāng)調(diào)用Prommise.resolve()或者Promise.reject()的時(shí)候也會產(chǎn)生微任務(wù))

擴(kuò)展一下：為什么需要微任務(wù)?它解決了什么問題?

如果不存在微任務(wù)，將所有的操作按照同一優(yōu)先級順序執(zhí)行，會造成一些高優(yōu)先級任務(wù)的實(shí)時(shí)性問題，所以才會出現(xiàn)微任務(wù)，通過將對實(shí)時(shí)性要求較高的任務(wù)放到微任務(wù)隊(duì)列中，從而保證高優(yōu)先級任務(wù)的實(shí)時(shí)性要求。

9.2 事件循環(huán)流程

JS使用單線程的“事件循環(huán)(Event Loop)”來處理多個(gè)任務(wù)的執(zhí)行，下面從兩個(gè)角度來解釋整個(gè)流程。

9.2.1 同步和異步角度

從同步和異步任務(wù)的角度來看，整個(gè)事件循環(huán)流程可分為以下步驟：

同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行場所，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊函數(shù);

當(dāng)指定的事情完成是，Event Table會將這個(gè)函數(shù)移入Event Queue;

主線程的任務(wù)執(zhí)行完畢為空是，會去Event Queue讀取對應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行;

上述過程會不斷重復(fù)，也就是常熟的Event Loop(事件循環(huán))。

cmd-markdown-logo

注：該圖來源于網(wǎng)絡(luò)

9.2.2 宏任務(wù)和微任務(wù)角度

從宏任務(wù)和微任務(wù)角度來看，整個(gè)事件循環(huán)機(jī)制可分為以下步驟：

獲取一個(gè)宏任務(wù)開始執(zhí)行，在執(zhí)行時(shí)先創(chuàng)建一個(gè)微任務(wù)隊(duì)列，當(dāng)遇到微任務(wù)的時(shí)候?qū)⑽⑷蝿?wù)放到微任務(wù)隊(duì)列;

接著獲取微任務(wù)隊(duì)列中的所有微任務(wù)，然后依次執(zhí)行(注：在執(zhí)行微任務(wù)的時(shí)候產(chǎn)生的微任務(wù)將放到微任務(wù)的隊(duì)列的尾部，在本次循環(huán)中執(zhí)行完畢)

循環(huán)執(zhí)行該過程。

9.3 實(shí)戰(zhàn)

事件循環(huán)的核心內(nèi)容就是需要區(qū)分清楚任務(wù)類型，只要將任務(wù)類型劃分好之后按照順序依次執(zhí)行即可，下面用一段代碼演示以下整個(gè)的輸出內(nèi)容。

console.log('start'); 
 
setTimeout(function() { 
    console.log('setTimeout1'); 
    const promise2 = new Promise((resolve, reject) => { 
        console.log('promise2'); 
        resolve(); 
    }); 
 
    promise2.then(() => { 
        console.log('then2'); 
        const promise3 = new Promise(resolve => { 
            console.log('promise3'); 
            resolve(); 
        }); 
        promise3.then(() => { 
            console.log('then3'); 
        }); 
    }); 
}, 1000); 
 
setTimeout(function() { 
    console.log('setTimeout2'); 
    const promise4 = new Promise((resolve, reject) => { 
        console.log('promise4'); 
        resolve(); 
    }); 
 
    promise4.then(() => { 
        console.log('then4'); 
    }); 
}, 1000); 
const promise1 = new Promise(resolve => { 
    console.log('promise1'); 
    resolve(); 
}); 
 
promise1.then(() => { 
    console.log('then1'); 
}); 
 
console.log('end'); 

只要了解整個(gè)事件循環(huán)機(jī)制，很容易可以得出答案，答案如下所示：

start 
promise1 
end 
then1 
setTimeout1 
promise2 
then2 
promise3 
then3 
setTimeout2 
promise4 
then4 

本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。