深入淺出任務隊列機制，非常淺

ideaa 發布于2019-08-23 15:13 / 1263人閱讀

摘要：即任務執行完畢，接著執行完所有的任務后，此時本輪循環結束，開始執行。完畢之后接著下一輪循環。來道經典題目答案是先走完所有同步代碼到微任務宏任務

前言

眾所周知，js是單線程的，就像我們不能一邊刷牙一邊洗臉（或許有些大佬真的可以），那么單線程如何才能規劃調度好要做的任務呢？
這個時候就要介紹一下這個任務機制了~

任務種類

宏任務

微任務

注意：瀏覽器環境和node環境是不一樣的，本文只討論瀏覽器環境

規則

執行一個宏任務(先執行同步代碼)-->執行所有微任務-->UI render-->執行下一個宏任務-->執行所有微任務-->UI render-->

根據HTML Standard，一輪事件循環執行結束之后，下輪事件循環執行之前開始進行UI render。即：macro-task任務執行完畢，接著執行完所有的micro-task任務后，此時本輪循環結束，開始執行UI render。UI render完畢之后接著下一輪循環。但是UI render不一定會執行，因為需要考慮ui渲染消耗的性能已經有沒有ui變動

需要注意的是，微任務是有優先級的，就如同上面的表格從上往下一樣，nextTick>Promise>MutationObserver.

那么宏任務有沒有優先級呢？？

大部分瀏覽器會把DOM事件回調優先處理因為要提升用戶體驗給用戶反饋，其次是network IO操作的回調，再然后是UIrender，之后的順序就難以捉摸了，其實不同瀏覽器的表現也不太一樣，這里不做過多討論。

來道經典題目

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案是
"script start"、"script end"、"promise1"、"promise2"、"setTimeout"
先走完所有同步代碼-到promise微任務-宏任務setTimeout

GPU云服務器云服務器異步任務隊列淺復制淺拷貝設計淺談

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101710.html

一篇文章教會你Event loop——瀏覽器和Node

摘要：如果沒到毫秒，那么階段就會跳過，進入階段，先執行的回調函數。參考文檔什么是瀏覽器的事件循環不要混淆和瀏覽器中的定時器詳解瀏覽器和不同的事件循環深入理解事件循環機制篇中的執行機制最近對Event loop比較感興趣，所以了解了一下。但是發現整個Event loop盡管有很多篇文章，但是沒有一篇可以看完就對它所有內容都了解的文章。大部分的文章都只闡述了瀏覽器或者Node二者之一，沒有對比...

Leck1e 2019-08-22 15:33 評論0 收藏0
js基礎深入淺出

摘要：當多個事件觸發的時候，會把異步事件依次的放入里等同步事件執行完之后，再去隊列里一個個執行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系持續不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0
深入前端-徹底搞懂JS的運行機制

摘要：瀏覽器是多進程的詳情看我上篇總結瀏覽器執行機制的文章深入前端徹底搞懂瀏覽器運行機制瀏覽器每打開一個標簽頁，就相當于創建了一個獨立的瀏覽器進程。執行異步操作事件完成，回調函數進入。主線程從讀取回調函數并執行。最近看了很多關于JS運行機制的文章，每篇都獲益匪淺，但各有不同，所以在這里對這幾篇文章里說的很精辟的地方做一個總結，參考文章鏈接見最后。本文博客地址了解進程和線程進程是應用...

luckyw 2019-08-02 15:30 評論0 收藏0
深入前端-徹底搞懂JS的運行機制

摘要：瀏覽器是多進程的詳情看我上篇總結瀏覽器執行機制的文章深入前端徹底搞懂瀏覽器運行機制瀏覽器每打開一個標簽頁，就相當于創建了一個獨立的瀏覽器進程。執行異步操作事件完成，回調函數進入。主線程從讀取回調函數并執行。最近看了很多關于JS運行機制的文章，每篇都獲益匪淺，但各有不同，所以在這里對這幾篇文章里說的很精辟的地方做一個總結，參考文章鏈接見最后。本文博客地址了解進程和線程進程是應用...

jaysun 2019-08-23 18:41 評論0 收藏0
前端基礎進階（十二）：深入核心，詳解事件循環機制

摘要：前端基礎進階正是圍繞這條線索慢慢展開，而事件循環機制，則是這條線索的最關鍵的知識點。特別是中正式加入了對象之后，對于新標準中事件循環機制的理解就變得更加重要。之后全局上下文進入函數調用棧。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的學習零散而龐雜，因此很多時候我們學到了一些東西，但...

whjin 2019-08-21 18:31 評論0 收藏0