浏览器 Javascript 的 EventLoop 动态图析

欢迎访问我的博客看原文...摸我
学习node eventLoop的童鞋请注意区分噢....本文代码都只在浏览器下进行

---

任务分类

宏任务(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、异步回调队列(包括微任务队列和宏任务队列)

执行栈

• 执行栈是宏任务被执行的地方

宏任务 & 宏任务队列

• 宏任务总会在下一个EventLoop中执行
• 若在执行宏任务的过程中，加入了新的微任务，会把新的微任务添加到微任务的队列中。

微任务 & 微任务队列

• 若在执行微任务的过程中，加入了新的微任务，会把新的微任务添加在当前任务队列的队尾巴。
• 微任务会在本轮EventLoop执行完后，马上把执行栈中的任务都执行完毕。

执行流程

① Javascript内核加载代码到执行栈
② 执行栈依次执行主线程的同步任务，过程中若遇调用了异步Api则会添加回调事件到回调队列中。且微任务事件添加到微任务队列中，宏任务事件添加到宏任务队列中去。直到当前执行栈中代码执行完毕。
③ 开始执行当前所有微任务队列中的微任务回调事件。 (:smirk:注意是所有哦，相当于清空队列)
④ 取出宏任务队列中的第一条(先进先出原则哦)宏任务，放到执行栈中执行。
⑤ 执行当前执行栈中的宏任务，若此过程总又再遇到微任务或者宏任务，继续把微任务和宏任务进行各自队伍的入队操作，然后本轮的宏任务执行完后，又把本轮产生的微任务一次性出队都执行了。
⑥ 以上操作往复循环...就是我们平时说的eventLoop了

....特点是

• 微任务队列操作，总是会一次性清空队列
• 宏任务队列每次只会取出一条任务到执行栈中执行

辅助理解

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) 
复制代码

建议不要直接拷贝到 控制台跑...大家先想想:smirk:

过程动画

答案

1 3 2 5 6 __ 等待一秒___ 7 8 9 4

---

其他相关

setTimeout

Q: 我的setTimeout函数到时间了，为啥一直不去执行。

A: setTimeOut的回调会被放到任务队列中，需要当前的执行栈执行完了，才会去执行执行任务队列中的内容。出现setTimeout回调不及时，说明在执行栈中出现了阻塞，或者说执行代码过多。

nextTick

常见的vue.$nextTick会把事件直接插入到当前微任务队列的中，感兴趣的请看我的笔记《vue_nextTick与eventLoop》 传送门--> 和 《vue_DOM更新与nextTick》传送门-->

---

其他文章

欢迎star我的github

async/await 实现异步编程

你了解GET和POST吗

veu_nextTick与eventLoop