js的event loop

预备知识

什么是event loop

event loop本身是一种计算机运行机制，可以用来解决一些单线程语言所带来的一些阻塞问题。

js任务类型

1.同步任务

2.异步任务

1. 宏任务: script（整体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering
2. 微任务: process.nextTick（Nodejs）, Promises, Object.observe, MutationObserver

通过一张图来了解event loop

思考以下代码执行顺序

console.log(1)
setTimeout(() => {
  console.log(2)
  p(3)
  setTimeout(() => {
    console.log(4)
  })
  p(5).then(() => {
    console.log(6)
  })
})
setTimeout(() => {
  console.log(7)
})
function p(num: number): Promise<any> {
  return new Promise(reslove => {
    console.log(num)
    reslove()
  })
}
p(8).then(() => {
  p(9).then(() => {
    console.log(10)
    setTimeout(() => {
      console.log(11)
    })
    setTimeout(() => {
      console.log(12)
    })
  })
})
// 1 8 9 10 2 3 5 6 7 11 12 4

浏览器event loop机制