瀏覽器eventLoop

baukh789 發(fā)布于2019-08-23 17:06 / 612人閱讀

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

瀏覽器中的eventLoop 與node中的eventLoop

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

js單線程存在的問題

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

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

什么是stack，queue，heap，event loop

stack（棧）:先進后出

queue（隊列）先進先出

heap(堆):存儲obj對象

Event Loop的具體流程

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

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

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

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

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

1，輸出1，將2push進回調(diào)隊列

2，將4push進回調(diào)隊列

3，輸出5

4，清空了執(zhí)行棧，讀取輸出2，發(fā)現(xiàn)有3，將3push進回調(diào)隊列

5，清空了執(zhí)行棧，讀取輸出4

6，清空了執(zhí)行棧，讀取輸出3

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

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

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

···

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

參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103813.html

事件循環(huán)(EventLoop)的學習總結(jié)

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

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

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

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

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

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

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

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

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

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