瀏覽器 Javascript 的 EventLoop 動態圖析

時間 2019-11-08

標籤瀏覽器 javascript eventloop 動態欄目瀏覽器简体版

原文原文鏈接

歡迎訪問個人博客看原文...摸我
學習node eventLoop的童鞋請注意區分噢....本文代碼都只在瀏覽器下進行vue

任務分類

宏任務(macrotask)

setTimeOut 、 setInterval 、 setImmediate 、 I/O 、各類callback、UI渲染等
優先級： 主代碼塊 > setImmediate > MessageChannel > setTimeOut/setInterval

微任務(microtask)

process.nextTick 、Promise 、MutationObserver 、async(實質上也是promise)
優先級： process.nextTick > Promise > MutationOberser

執行分區

咱們經常吧EventLoop中分爲內存、執行棧、WebApi、異步回調隊列(包括微任務隊列和宏任務隊列)node

執行棧

執行棧是宏任務被執行的地方

宏任務 & 宏任務隊列

宏任務總會在下一個EventLoop中執行
若在執行宏任務的過程當中，加入了新的微任務，會把新的微任務添加到微任務的隊列中。

微任務 & 微任務隊列

若在執行微任務的過程當中，加入了新的微任務，會把新的微任務添加在當前任務隊列的隊尾巴。
微任務會在本輪EventLoop執行完後，立刻把執行棧中的任務都執行完畢。

執行流程

① Javascript內核加載代碼到執行棧
② 執行棧依次執行主線程的同步任務，過程當中若遇調用了異步Api則會添加回調事件到回調隊列中。且微任務事件添加到微任務隊列中，宏任務事件添加到宏任務隊列中去。直到當前執行棧中代碼執行完畢。
③ 開始執行當前全部微任務隊列中的微任務回調事件。 (:smirk:注意是全部哦，至關於清空隊列)
④ 取出宏任務隊列中的第一條(先進先出原則哦)宏任務，放到執行棧中執行。
⑤ 執行當前執行棧中的宏任務，若此過程總又再遇到微任務或者宏任務，繼續把微任務和宏任務進行各自隊伍的入隊操做，而後本輪的宏任務執行完後，又把本輪產生的微任務一次性出隊都執行了。
⑥ 以上操做往復循環...就是咱們平時說的eventLoop了git

....特色是github

微任務隊列操做，老是會一次性清空隊列
宏任務隊列每次只會取出一條任務到執行棧中執行

輔助理解

let promiseGlobal = new Promise(resolve=>{
  console.log(1)
  resolve('2')
})
console.log(3) 

promiseGlobal.then(data=>{
  console.log(data)
  let setTimeoutInner = setTimeout(_=>{
  console.log(4)
   },1000)
   let promiseInner =new Promise(resolve=>{
     console.log(5) 
      resolve(6)
    }).then(data=>{
     console.log(data)
   })
})
let setTimeoutGlobal = setTimeout(_=>{
  console.log(7);
 let promiseInGlobalTimeout = new Promise(resolve=>{
      console.log(8); 
      resolve(9)
  }).then(data=>{
     console.log(data)
  })
},1000) 
複製代碼