JavaScript事件循環探索

hqman 發布于2019-08-22 18:49 / 2658人閱讀

摘要：事件循環事件循環具有至少兩個隊列處理任務。同時含有宏任務和微任務主線程運行運行運行運行本例中在的事件處理函數里增加了一個立即兌現的，需要運行。處理的事件處理函數計時器主線程運行運行運行運行

一直對js的事件循環不是很清晰，最近看了JavaScript忍者秘籍的第13章后，有了一些感悟，特此總結一下，分享給大家。

單線程

眾所周知，JavaScript是單線程執行模型，同一時刻只能執行一個代碼片段，一個任務開始后知道運行完成，不會被其他任務中斷。當一個任務花費的時間很長的話，用戶就會明顯的感覺到卡頓。瀏覽器為了解決這個問題引入了事件循環的概念（Event Loop）。

事件循環

事件循環具有至少兩個隊列處理任務。任務分為兩類，宏任務（macro-task）和微任務（micro-task）。

1.宏任務代表一個個離散、獨立的工作單元，運行完之后，瀏覽器可以繼續其他的調度。包括：創建文檔對象，解析HTML，執行JavaScript，以及各種事件……
2.微任務是更小的任務，主要用戶更新應用程序的狀態，必須在瀏覽器任務繼續執行其他任務之前執行。微任務需要盡可能快地通過異步方式執行，同時不能產生全新的微任務。包括promise、回調函數、DOM發生變化……

僅包含宏任務

// 主線程JavaScript運行15ms
btn1.addEventListener("click", function() {運行 8ms}, false);
btn2.addEventListener("click", function() {運行 5ms}, false);

現在假設主線程運行15ms，在第5ms單擊btn1，在第12ms的時候單擊btn2。基于單線程執行模型，單擊按鈕之后不會立即執行對應的處理函數，因為一個任務一旦開始就不會被另一個任務中斷。因此，在主線程執行的15ms期間，按鈕的單擊處理函數放入隊列。當主線程執行完成也就是15ms之后，程序開始處理微任務，因為當前不存在微任務，跳過此步驟，開始執行更新UI。

之后進入第二次循環，也就是開始執行btn1的處理函數，需要運行8ms，btn2處理函數在隊列中等待。當btn1處理函數執行完之后，瀏覽器檢查微任務是否存在和是否更新UI，刪除任務隊列里的btn1的處理函數。

最后進入第三次循環，開始執行btn2的處理函數，需要運行5ms，處理函數執行完之后，檢查微任務和是否需要更新UI，刪除任務隊列里的btn2的處理函數，最終任務隊列為空，循環結束。

同時含有宏任務和微任務

// 主線程JavaScript運行15ms
btn1.addEventListener("click", function() {
    Promise.resolve().then(() => {
       運行 4ms 
    });
    運行 8ms 
}, false);
btn2.addEventListener("click", function() {運行 5ms}, false);

本例中在btn1的事件處理函數里增加了一個立即兌現的Promise，需要運行4ms。

現在代碼的執行順序為：

主線程執行15ms，在5ms和12ms的時候分別將處理函數放入任務隊列，更新UI。

15m后處理btn1事件處理函數，發現Promise，放入微任務隊列，btn1事件處理函數繼續執行8ms，檢查微任務隊列發現有Promise回調函數，然后開始執行Promise回調函數，運行4ms，繼續檢查微任務隊列，如果為空，檢查是否需要更新UI，進入下一輪循環。

處理btn2的事件處理函數……

計時器

// 主線程JavaScript運行18ms
setTimeout(function() {
    運行6ms;
}, 10);
setInterval(function() {
    運行8ms;
}, 10);
btn1.addEventListener("click", function() {運行 10ms}, false);

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

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

簡潔明了探索瀏覽器Event loop

摘要：前段時間我對于瀏覽器中的和哪個先執行有所困惑，苦于搜索也沒有發現很明確的答案，于是決定深入探索瀏覽器，現有所愚見，想與大家分享，希望能幫助到那些還在爬坑的人。瀏覽器端中的異步隊列有兩種隊列和隊列。瀏覽器會不斷從隊列中按順序取執行。前段時間我對于瀏覽器Event loop中的MacroTask和MicroTask哪個先執行有所困惑，苦于搜索也沒有發現很明確的答案，于是決定深入探索瀏覽器...

DrizzleX 2019-08-23 17:10 評論0 收藏0
JavaScript是如何工作的:Web Workers的構建塊+ 5個使用他們的場景

摘要：最后，提供個正確使用的場景。異步編程的一個很好的用例就請求。這意味著異步函數只能解決一小部分語言單線程中的局限性問題。中有類似的集群子進程概念，他們也是多線程但是和還是有區別。可用的特性由于的多線程特性，工作者只能訪問特性的一個子集。 showImg(https://segmentfault.com/img/bVblS8J?w=400&h=298); 這是專門探索 JavaScript...

ningwang 2019-08-23 14:25 評論0 收藏0
JavaScript是如何工作: 深入探索 websocket 和HTTP/2與SSE +如何選擇正

摘要：數據作為消息通過傳輸，每個消息由一個或多個幀組成，其中包含正在發送的數據有效負載。幀數據如上所述，數據可以被分割成多個幀。但是，規范希望能夠處理交錯的控制幀。文章底部分享給大家一套 react + socket 實戰教程這是專門探索 JavaScript 及其所構建的組件的系列文章的第5篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章...

cuieney 2019-08-23 14:10 評論0 收藏0
node核心特性理解

摘要：概述本文主要介紹了我對的一些核心特性的理解，包括架構特點機制核心模塊與簡單應用。在此期間，主線程繼續執行其他任務。延續了瀏覽器端單線程，只用一個主線程執行，不斷循環遍歷事件隊列，執行事件。原文地址在我的博客，轉載請注明來源，謝謝！ node是在前端領域經常看到的詞。node對于前端的重要性已經不言而喻，掌握node也是作為合格的前端工程師一項基本功了。知道node、知道后端的一些東西...

huangjinnan 2019-08-21 17:03 評論0 收藏0
學習JavaScript之內存泄漏

摘要：接上回我寫了一篇關于閉包的博客學習之閉包，最后談到閉包導致的問題時留了一個尾在以下的瀏覽器中會有內存泄漏的問題。今天的博客就繼續探索一下內存泄漏的問題。博客地址的前端之路原文鏈接學習之內存泄漏接上回我寫了一篇關于閉包的博客《學習JavaScript之閉包》，最后談到閉包導致的問題時留了一個尾：在IE9以下的瀏覽器中會有內存泄漏的問題。今天的博客就繼續探索一下內存泄漏的問題。淺...

nodejh 2019-08-20 17:29 評論0 收藏0