瀏覽器eventLoop

baukh789 發布于2019-08-23 17:06 / 563人閱讀

摘要：瀏覽器中的與中的之前是不一樣，之后，與瀏覽器一樣單線程存在的問題是單線程的，處理任務是一件接著一件處理，所以如果一個任務需要處理很久的話，后面的任務就會被阻塞所以通過事件循環的方式解決了這個問題在了解事件循環前，我們需要了解一些關鍵詞什么是

瀏覽器中的eventLoop 與node中的eventLoop

node11之前是不一樣，node11之后，與瀏覽器一樣

js單線程存在的問題

js是單線程的，處理任務是一件接著一件處理，所以如果一個任務需要處理很久的話，后面的任務就會被阻塞

所以js通過Event Loop事件循環的方式解決了這個問題,在了解事件循環前，我們需要了解一些關鍵詞

什么是stack，queue，heap，event loop

stack（棧）:先進后出

queue（隊列）先進先出

heap(堆):存儲obj對象

Event Loop的具體流程

堆里面有同步和異步的方法

這些方法，放到棧里，棧是先進后出的執行

同步的話一個一個的執行，碰到異步的方法，也會執行，但是不會執行完，而是先交給webapis處理，多個異步，會形成一個隊列，先進先出

等到同步的方法執行完后，把wepapi中的異步方法取出來，放到棧中執行

上面的代碼最后輸出1，5，2，4，3，執行過程：
只有console.log(2)執行完成，執行棧再次清空時，才會從回調隊列取出console.log(3)

1，輸出1，將2push進回調隊列

2，將4push進回調隊列

3，輸出5

4，清空了執行棧，讀取輸出2，發現有3，將3push進回調隊列

5，清空了執行棧，讀取輸出4

6，清空了執行棧，讀取輸出3

Macrotask(宏任務)、Microtask（微任務）

Microtask（微任務）雖然是隊列，但并不是一個一個放入執行棧，而是當執行棧請空，會執行全部

Microtask（微任務）隊列中的任務，最后才是取回調隊列的第一個Macrotask(宏任務)

···

···
上面的執行過程是：
1，將setTimeout給push進宏任務
2，將then(2)push進微任務
3，將then(4)push進微任務
4，任務隊列為空，取出微任務第一個then(2)壓入執行棧
5，輸出2，將then(3)push進微任務
6，任務隊列為空，取出微任務第一個then(4)壓入執行棧
7，輸出4
8，任務隊列為空，取出微任務第一個then(3)壓入執行棧
9，輸出3
10，任務隊列為空，微任務也為空，取出宏任務中的setTimeout（1）
11，輸出1

參考

https://juejin.im/post/5a6309...
https://github.com/Advanced-F...

GPU云服務器云服務器 eventloop 瀏覽器跨境瀏覽器瀏覽器評測

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

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

事件循環(EventLoop)的學習總結

摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。前言在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

lentoo 2019-08-29 16:27 評論0 收藏0
事件循環(EventLoop)的學習總結

摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。前言在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

hizengzeng 2019-08-26 12:16 評論0 收藏0
事件循環(EventLoop)的學習總結

摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。前言在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

ninefive 2019-08-02 11:19 評論0 收藏0
JS核心知識點梳理——異步，單線程，運行機制

摘要：引言學習的時候，經常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進程到單線程，運行機制最全面的一次梳理運行機制詳解再談異步機制詳解運行原理解析并發模型與事件循環 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言學習javascipt的時候，經常聽人說，javascipt即是異步...

TANKING 2019-08-26 13:55 評論0 收藏0
Netty 框架總結「ChannelHandler 及 EventLoop」

摘要：隨著狀態發生變化，相應的產生。這些被轉發到中的來采取相應的操作。當收到數據或相關的狀態改變時，這些方法被調用，這些方法和的生命周期密切相關。主要由一系列組成的。采用的線程模型，在同一個線程的中處理所有發生的事。「博客搬家」原地址: 簡書原發表時間: 2017-05-05 學習了一段時間的 Netty，將重點與學習心得總結如下，本文主要總結ChannelHandler 及 E...

VioletJack 2019-08-15 13:41 評論0 收藏0