9.1 任務(wù)分類

9.1.1 廣義分類

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

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)泗縣,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

同步任務(wù)

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

異步任務(wù)

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

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

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

9.1.2 精確分類

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

宏任務(wù)

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

(1)整體script代碼

(2)setTimeout

(3)setInterval

(4)setImmediate(Node獨有)

(5)I/O

微任務(wù)

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

(1)process.nextTick(Node獨有)

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

(2)MutationObserver

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

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

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

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

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

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

9.2.1 同步和異步角度

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

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

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

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

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

cmd-markdown-logo

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

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

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

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

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

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

9.3 實戰(zhàn)

事件循環(huán)的核心內(nèi)容就是需要區(qū)分清楚任務(wù)類型，只要將任務(wù)類型劃分好之后按照順序依次執(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 
 
 
 
 

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

當前名稱：前端百題斬之兩個角度一個實戰(zhàn)了解事件循環(huán)
URL網(wǎng)址：http://uogjgqi.cn/article/djccsii.html