[[438009]]

9.1 任務分類

9.1.1 廣義分類

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

同步任務

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

異步任務

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

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

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

9.1.2 精確分類

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

宏任務

宏任務主要指的是任務隊列中的這些任務，主要包含以下幾類：

(1)整體script代碼

(2)setTimeout

(3)setInterval

(4)setImmediate(Node獨有)

(5)I/O

微任務

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

(1)process.nextTick(Node獨有)

將callback添加到下一個時間點的隊列;

(2)MutationObserver

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

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

擴展一下：為什么需要微任務?它解決了什么問題?

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

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

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

9.2.1 同步和異步角度

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

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

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

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

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

cmd-markdown-logo

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

9.2.2 宏任務和微任務角度

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

獲取一個宏任務開始執(zhí)行，在執(zhí)行時先創(chuàng)建一個微任務隊列，當遇到微任務的時候?qū)⑽⑷蝿辗诺轿⑷蝿贞犃?

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

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

9.3 實戰(zhàn)

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

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

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

本文轉載自微信公眾號「前端點線面」，可以通過以下二維碼關注。轉載本文請聯(lián)系前端點線面公眾號。