日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端百題斬之兩個(gè)角度一個(gè)實(shí)戰(zhàn)了解事件循環(huán)

9.1 任務(wù)分類

9.1.1 廣義分類

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

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

同步任務(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ù)才會(huì)進(jìn)入主線程執(zhí)行。(注：異步任務(wù)解決的是性能問題)

拓展一下：為什么會(huì)存在異步任務(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í)，就會(huì)產(chǎn)生DOM變化記錄的微任務(wù)。

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

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

如果不存在微任務(wù)，將所有的操作按照同一優(yōu)先級(jí)順序執(zhí)行，會(huì)造成一些高優(yōu)先級(jí)任務(wù)的實(shí)時(shí)性問題，所以才會(huì)出現(xiàn)微任務(wù)，通過將對(duì)實(shí)時(shí)性要求較高的任務(wù)放到微任務(wù)隊(duì)列中，從而保證高優(yōu)先級(jí)任務(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并注冊(cè)函數(shù);

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

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

上述過程會(huì)不斷重復(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)容。

 
 
 
 
    
  
  
  
  
  1. console.log('start'); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. setTimeout(function() { 
    4. 
  
  
  
  
  4.     console.log('setTimeout1'); 
    5. 
  
  
  
  
  5.     const promise2 = new Promise((resolve, reject) => { 
    6. 
  
  
  
  
  6.         console.log('promise2'); 
    7. 
  
  
  
  
  7.         resolve(); 
    8. 
  
  
  
  
  8.     }); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.     promise2.then(() => { 
    11. 
  
  
  
  
  11.         console.log('then2'); 
    12. 
  
  
  
  
  12.         const promise3 = new Promise(resolve => { 
    13. 
  
  
  
  
  13.             console.log('promise3'); 
    14. 
  
  
  
  
  14.             resolve(); 
    15. 
  
  
  
  
  15.         }); 
    16. 
  
  
  
  
  16.         promise3.then(() => { 
    17. 
  
  
  
  
  17.             console.log('then3'); 
    18. 
  
  
  
  
  18.         }); 
    19. 
  
  
  
  
  19.     }); 
    20. 
  
  
  
  
  20. }, 1000); 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22. setTimeout(function() { 
    23. 
  
  
  
  
  23.     console.log('setTimeout2'); 
    24. 
  
  
  
  
  24.     const promise4 = new Promise((resolve, reject) => { 
    25. 
  
  
  
  
  25.         console.log('promise4'); 
    26. 
  
  
  
  
  26.         resolve(); 
    27. 
  
  
  
  
  27.     }); 
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29.     promise4.then(() => { 
    30. 
  
  
  
  
  30.         console.log('then4'); 
    31. 
  
  
  
  
  31.     }); 
    32. 
  
  
  
  
  32. }, 1000); 
    33. 
  
  
  
  
  33. const promise1 = new Promise(resolve => { 
    34. 
  
  
  
  
  34.     console.log('promise1'); 
    35. 
  
  
  
  
  35.     resolve(); 
    36. 
  
  
  
  
  36. }); 
    37. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38. promise1.then(() => { 
    39. 
  
  
  
  
  39.     console.log('then1'); 
    40. 
  
  
  
  
  40. }); 
    41. 
  
  
  
  
  41.  
    42. 
  
  
  
  
  42. console.log('end'); 
    43.

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

 
 
 
 
    
  
  
  
  
  1. start 
    2. 
  
  
  
  
  2. promise1 
    3. 
  
  
  
  
  3. end 
    4. 
  
  
  
  
  4. then1 
    5. 
  
  
  
  
  5. setTimeout1 
    6. 
  
  
  
  
  6. promise2 
    7. 
  
  
  
  
  7. then2 
    8. 
  
  
  
  
  8. promise3 
    9. 
  
  
  
  
  9. then3 
    10. 
  
  
  
  
  10. setTimeout2 
    11. 
  
  
  
  
  11. promise4 
    12. 
  
  
  
  
  12. then4 
    13.

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


新聞標(biāo)題：前端百題斬之兩個(gè)角度一個(gè)實(shí)戰(zhàn)了解事件循環(huán)
URL標(biāo)題：http://www.5511xx.com/article/djccsii.html