如何理解JS事件的循环机制(浏览器端)
答：

• 我们知道JS是单线程运行的(暂时撇去web worker)、是异步的、是基于事件执行的
• JS主线程是同步执行的，遇到异步任务的时候，需要任务队列来辅助
• HTML规范说，浏览器至少有一个事件循环，一个事件循环至少有一个任务队列，每个任务都有不同的分组，每个组有不同的优先级权限

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染

• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

  
  

宏任务
浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：

(macro)task->渲染->(macro)task->...

宏任务包括

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务
microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
所以它的响应速度相比setTimeout(setTimeout是task)会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。

微任务包含

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)

• 事件循环过程中，先执行完主线程中的代码，然后循环去调取任务队列中的任务执行，而微任务优先级会大于宏任务，优先执行微任务，不断循环这个过程，这就是事件循环的缩略描述
  规则：同步代码->执行全部微任务->单个宏任务->全部微任务->...
  记得画图：执行栈，宏任务队列，微任务队列
  注意：1. setTimeout如果有值，则时间到了才放入宏任务； 2. new Promise((resolve, reject) => {xxx}) xxx为同步代码

 setTimeout(function f1(){
     console.log(1)

     Promise.resolve().then(function f2(){
         setTimeout(function f3(){
         console.log(3)
         })
         console.log(2)
     })
     })

     setTimeout(function f4(){
     console.log(4)

     Promise.resolve().then(function f5() {
         setTimeout(function f6() {
         console.log(5)
         })
         console.log(6)
     })
     })

Chrome

setTimeout ==》 一会(宏)
.then(fn) ==》马上(微)

new Promise(fn)中，fn是马上执行的，相当于fn()