事件循環機制和task執行順序的一些概括(javascript)

未東興發布于2019-08-23 11:26 / 1956人閱讀

摘要：而當響應成功了以后，瀏覽器的事件表則會將回調函數添加至事件隊列中等待執行。事件循環器會不停的檢查事件隊列，如果不為空，則取出隊首壓入執行棧執行。類型的任務目前包括了以及的回調函數。

事件循環（event loop） :

首先說事件隊列（task queue）

事件隊列是一個存儲著待執行任務的隊列，其中的任務嚴格按照時間先后順序執行，排在隊頭的任務將會率先執行，而排在隊尾的任務會最后執行。
事件隊列每次僅執行一個任務，在該任務執行完畢之后，再執行下一個任務。
執行棧則是一個類似于函數調用棧的運行容器，當執行棧為空時，JS 引擎便檢查事件隊列，如果不為空的話，事件隊列便將第一個任務壓入執行棧中運行。
當我們設置一個延遲函數的時候，當前腳本并不會阻塞，它只是會在瀏覽器的事件表中進行記錄，程序會繼續向下執行。當延遲的時間結束之后，事件表會將回調函數添加至事件隊列中，事件隊列拿到了任務過后便將任務壓入執行棧（stack）當中，執行棧執行任務

事件循環機制:

檢查事件隊列是否為空，如果為空，則繼續檢查；如不為空，則執行 2； 
取出事件隊列的首部，壓入執行棧； 
執行任務
檢查執行棧，如果執行棧為空，則跳回第 1 步；如不為空，則繼續檢查；

結合 Web APIs 事件循環:

ajax 請求掛起，然后繼續執行后面的代碼，至于請求何時響應，對我們的程序不會有影響，甚至它可能永遠也不響應，也不會使瀏覽器阻塞。
而當響應成功了以后，瀏覽器的事件表則會將回調函數添加至事件隊列中等待執行。

事件監聽器的回調函數也是一個任務，當我們注冊了一個事件監聽器時，瀏覽器事件表會進行登記，當我們觸發事件時，事件表便將回調函數添加至事件隊列當中。
事件循環器會不停的檢查事件隊列，如果不為空，則取出隊首壓入執行棧執行。當一個任務執行完畢之后，事件循環器又會繼續不停的檢查事件隊列，

不過在這間，任務結束后瀏覽器會對頁面進行渲染。這就保證了用戶在瀏覽頁面的時候不會出現頁面阻塞的情況，這也使 JS 動畫成為可能,同步就沒動畫的漸變效果了。

總結:

事件隊列嚴格按照時間先后順序將任務壓入執行棧執行；

當執行棧為空時，瀏覽器會一直不停的檢查事件隊列，如果不為空，則取出第一個任務；

在每一個任務結束之后，瀏覽器會對頁面進行渲染；

- 接下來說一下不同的任務(task)之間的執行順序問題

microtask

每一個事件循環（event loop）都有著眾多不同的任務來源（task source），這些來源能夠保證其中的任務能夠有序的執行。不過，在每一輪事件循環結束之后，瀏覽器可以自行選擇將哪一個來源當中的任務加入到執行隊列當中

任務Task是嚴格按照時間順序壓棧和執行的,當一個 task 執行結束后，在下一個 task 執行開始前，瀏覽器可以對頁面進行重新渲染

Microtask 通常來說就是需要在當前 task 執行結束后立即執行的任務，

例如需要對一系列的任務做出回應，或者是需要異步的執行任務而又不需要分配一個新的 task，這樣便可以減小一點性能的開銷。microtask
任務隊列是一個與 task 任務隊列相互獨立的隊列， microtask 任務將會在每一個 task 任務執行結束之后執行。每一個
task 中產生的 microtask 都將會添加到 microtask 隊列中， microtask 中產生的 microtask
將會添加至當前隊列的尾部，并且 microtask 會按序的處理完隊列中的所有任務。 microtask 類型的任務目前包括了
MutationObserver 以及 Promise 的回調函數。   microtask 執行在當前 task 結束之后，下一個 task 開始之前。
microtask 執行在當前 task 結束之后，下一個 task 開始之前。

另外補充一下上文說到的 Mutation Observer
使用鏈接見文章: https://segmentfault.com/a/11...

Mutation Observer API 用來監視 DOM 變動。DOM 的任何變動，比如節點的增減、屬性的變動、文本內容的變動，這個 API 都可以得到通知。
它等待所有腳本任務完成后，才會運行（即異步觸發方式）。
它把 DOM 變動記錄封裝成一個數組進行處理，而不是一條條個別處理 DOM 變動。
它既可以觀察 DOM 的所有類型變動，也可以指定只觀察某一類變動。
observe方法用來啟動監聽，它接受兩個參數。
第一個參數：所要觀察的 DOM 節點
第二個參數：一個配置對象，指定所要觀察的特定變動

總結:
　　

microtask 和 task 一樣嚴格按照時間先后順序執行。　　

microtask 類型的任務包括 Promise callback和 Mutation callback。

當 JS 執行棧為空時，便生成一個 microtask 檢查點。

最后概括一些分類

macrotask:  
script (整體代碼)，setTimeout, setInterval, setImmediate, I/O, UI rendering.?
microtask:  
process.nextTick, Promise(原生)，Object.observe，MutationObserver

在microtask中  process.nextTick 優先級高于 Promise。?

對于任務名稱的事件隊列關系

task queue == macrotask queue != microtask queue

GPU云服務器云服務器 javascript執行順序 js事件循環機制 gpu sql的執行順序 php執行的機制原理

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

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

Javascript系列之javascript機制

摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
javascript引擎執行的過程的理解--執行階段

摘要：如果對語法分析和預編譯，還有疑問引擎執行的過程的理解語法分析和預編譯階段。參與執行過程的線程分別是引擎線程也稱為內核，負責解析執行腳本程序的主線程例如引擎。以上便是引擎執行宏任務的整個過程。一、概述 js引擎執行過程主要分為三個階段，分別是語法分析，預編譯和執行階段，上篇文章我們介紹了語法分析和預編譯階段，那么我們先做個簡單概括，如下： 1、語法分析：分別對加載完成的代碼塊進行語法...

SnaiLiu 2019-08-23 15:10 評論0 收藏0
javascript引擎執行的過程的理解--執行階段

摘要：如果對語法分析和預編譯，還有疑問引擎執行的過程的理解語法分析和預編譯階段。參與執行過程的線程分別是引擎線程也稱為內核，負責解析執行腳本程序的主線程例如引擎。以上便是引擎執行宏任務的整個過程。一、概述 js引擎執行過程主要分為三個階段，分別是語法分析，預編譯和執行階段，上篇文章我們介紹了語法分析和預編譯階段，那么我們先做個簡單概括，如下： 1、語法分析：分別對加載完成的代碼塊進行語法檢驗，語...

Achilles 2019-05-23 14:34 評論0 收藏0
從event loop規范探究javaScript異步及瀏覽器更新渲染時機

摘要：規范中定義了瀏覽器何時進行渲染更新，了解它有助于性能優化。結合一些資料，對上邊規范給出一些理解有誤請指正每個線程都有自己的。列為，列為，列為。我們都知道是單線程，渲染計算和腳本運行共用同一線程網絡請求會有其他線程，導致腳本運行會阻塞渲染。本文轉自blog 轉載請注明出處異步的思考 event loops隱藏得比較深，很多人對它很陌生。但提起異步，相信每個人都知道。異步背后的靠山就是...

13651657101 2019-08-20 16:15 評論0 收藏0