事件执行的机制(Event Loop)

执行顺序

1. 一开始整段脚本作为第一个宏任务执行
2. 执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
3. 当前宏任务执行完出队，检查微任务队列，如果有则依次执行，直到微任务队列为空
4. 执行浏览器 UI 线程的渲染工作
5. 检查是否有Web worker任务，有则执行
6. 执行队首新的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

宏任务与微任务

• 宏任务（MacroTask）setTimeout、setInterval, requestAnimationFrame, I/O
• 微任务（MicroTask） Promise.then, 事件绑定，process.nextTick, Object.observe（已废弃；Proxy 对象替代）, MutationObserver

     console.log('1')
      // 宏任务
      setTimeout(function() {
        console.log('2')
        new Promise(function(resolve) {
          console.log('3')
          resolve()
        }).then(function() {
          console.log('4')
        })
      }, 0)

      // 微任务
      new Promise(function(resolve) {
        console.log('5')
        resolve()
      }).then(function() {
        console.log('6')
      })

      // 宏任务
      setTimeout(function() {
        console.log('7')
        new Promise(function(resolve) {
          console.log('8')
          resolve()
        }).then(function() {
          console.log('9')
        })
        console.log('10')
      }, 0)

      // 微任务
      new Promise(function(resolve) {
        console.log('11')
        resolve()
      }).then(function() {
        console.log('12')
      })
      console.log('13')

      // 1 5 11 13 6 12 2 3 4 7 8 10 9
      // 1. setTimeout Promise 都是异步执行
      // 2. Promise 中的 then 异步执行
      // 3. 微任务优先级大于宏任务
      // 4. 执行完一个宏任务中的所有代码才会执行下一个宏任务