eventLoop

console.log(1) //同步 1

setTimeout(() => {
  console.log(2) //宏任务 7
}, 0)
new Promise(resolve => {
  console.log(3) //同步 2
  resolve()
}).then(() => {
  console.log(4) //script中微任务 5
})
setTimeout(() => {
  console.log(5) //同步代码 9.1
  new Promise(resolve => {
    console.log(6) //同步代码 9.2
    setTimeout(() => { 
      console.log(7) //宏任务 9.4
    })
    resolve()
  }).then(() => {
    console.log(8) //微任务 9.3
  })
}, 500) //宏任务 9

new Promise(resolve => {
  console.log(9) //同步 3
  resolve()
}).then(() => {
  console.log(10) //script中的微任务 6
  setTimeout(() => {
    console.log(11)
  }, 0) //宏任务 8
})
console.log(12) //同步 4
// 1 3 9 12 4 10 2 11 5 6 8 7

eventLoop

宏任务

script整体代码 、setInterval、setTimeout、setImmediate、IO...

微任务

promise.then promise.catch nextTick(默认微任务 有dom操作宏任务) ....

执行机制

• 先同步后异步
• 先进入其中一个宏任务 再进行对应的宏任务内的微任务 直到清空宏任务队列及微任务队列

重点案例

• tab切换案例
• 回到顶部案例
• 全局拖拽案例
• 局部拖拽案例
• 购物车案例
• 轮播图案例 （透明轮播、无缝轮播、旋转木马轮播）
• 放大镜案例

重点重构

• 高阶函数重构
• new关键词重构
• instance重构
• flat重构 （扁平化实现）
• promise重构
• 数组去重实现

执行机制

• 浏览器渲染机制
• 事件流
• eventLoop
• ...