<abbr id="ayee0"></abbr>

瀏覽器eventLoop

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

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

瀏覽器中的eventLoop 與node中的eventLoop

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

js單線程存在的問題

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

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

什么是stack，queue，heap，event loop

stack（棧）:先進(jìn)后出

queue（隊列）先進(jìn)先出

heap(堆):存儲obj對象

Event Loop的具體流程

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

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

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

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

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

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

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

3，輸出5

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

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

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

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

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

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

···

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

參考

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