16事件循环：浏览器中的 Event-Loop

1.一道面试题

2.浏览器中的 Event-Loop 机制

1.一道面试题

console.log(1)

setTimeout(function() {
  console.log(2)
})

new Promise(function (resolve) {
  console.log(3)
  resolve()
 }).then(function () {
  console.log(4)
}).then(function() {
  console.log(5)
})

console.log(6)

输出： 1 3 6 4 5 2

2.浏览器中的 Event-Loop 机制

2-1 关键角色剖析

• 函数调用栈
• 宏任务（macro-task）
• 微任务（micro-task）

2-2 函数调用栈

• 引擎第一次执行js代码时创建全局上下文并压入调用栈
• 后面每遇到函数调用就往栈中压入新的函数上下文
• 引擎执行栈顶的函数，执行完毕弹出对应的上下文

2-3 宏任务与微任务队列

任务队列：

1. js的特性是单线程+异步，js中的异步任务（如setTimeOut、Promise.then()）不需要立刻被执行，所以它们在刚刚被派发时，不能马上进入调用栈，所以这些等待执行的任务，按照一定的规则排队等待被推入调用栈执行。
2. 任务队列分为”宏任务“和”微任务’。