javascript异步详解1:事件循环机制EventLoop

一. js运行机制

js是单线程，但是存在同步【阻塞】和异步【非阻塞】执行模式

• 同步：从上到下、从左到右的⽅式执⾏代码逻辑
• 异步：和同步对⽴，所以异步模式的代码是不会按照默认顺序执⾏的。在解释时，如果遇到异步模式的代码，引擎会将当前的任务“挂起”并略过

浏览器的线程组成

1. GUI渲染线程
2. JavaScript引擎线程
3. 事件触发线程
4. 定时器触发线程
5. http请求线程
6. 其他线程

在JavaScript代码运⾏的过程中实际执⾏程序时同时只存在⼀个活动线程，这⾥实现同步异步就是靠 多线程切换的形式来进⾏实现的。

所以我们通常分析时，将上⾯的细分线程归纳为下列两条线程：

1. 【主线程】：这个线程⽤了执⾏⻚⾯的渲染，JavaScript代码的运⾏，事件的触发等等
2. 【⼯作线程】：这个线程是在幕后⼯作的，⽤来处理异步任务的执⾏来实现⾮阻塞的运⾏模式

二. 事件循环机制

1. 宏任务：

   宏任务是JavaScript中最原始的异步任务，包括setTimeout、setInterVal、AJAX等，在代码执⾏环境中按照同步代码的顺序，逐个进⼊⼯作线程挂起，再按照异步任务到达的时间节点，逐个进⼊异步任务队列，最终按照队列中的顺序进⼊函数执⾏栈进⾏执⾏。

   1 `script`
   2 setTimeout
   3 setInterval
   4 setImmediate（node）
   5 I/O 网络请求完成、文件读写完成事件
   6 UI rendering
   7 requestAnimationFrame（浏览器）
   8 用户交互事件（比如鼠标点击、滚动页面、放大缩小等）
   

2. 微任务：

   微任务是随着ECMA标准升级提出的新的异步任务，微任务在异步任务队列的基础上增加了【微任务】的概念，每 ⼀个宏任务执⾏前，程序会先检测中是否有当次事件循环未执⾏的微任务，优先清空本次的微任务后，再执⾏下⼀ 个宏任务，每⼀个宏任务内部可注册当次任务的微任务队列，再下⼀个宏任务执⾏前运⾏，微任务也是按照进⼊队列的顺序执⾏的。

   1. process.nextTick（node）
   2. MutationObserver（浏览器）
   3. promise.then/.catch/.finally
   

   【注】：new promise中的function是同步的，promise的.then.catch.finally中的内容才是异步的

3. 图解

   主线程代码在运⾏时，会按照同步和异步代码将其分成两个去处：如果是同步代码执⾏，就会直接将该任务放在⼀个叫做【函数执⾏栈】的空间进⾏执⾏，执⾏栈是典型的【栈结构】（先进后出），程序在运⾏的时候会将同步代码按顺序⼊栈。将异步代码放到【⼯作线程】中暂时挂起，【⼯作线程】中保存的是定时任务函数、JS的交互事件、JS的⽹络请求等耗时操作。

   当【主线程】将代码块筛选完毕后，进⼊执⾏栈的函数会按照从外到内的顺序依次执行，运⾏中涉及到的对象数据是在堆内存中进⾏保存和管理的。当执⾏栈内的任务全部执⾏完毕 后，执⾏栈就会清空。

   执⾏栈清空后，“事件循环”就会⼯作，“事件循环”会检测本次循环中是否还有微任务执行，若有的话，将所有微任务插入到任务队列后执行清空所有微任务。

   微任务清空后，⼯作线程会把到期的定时任务、返回数据的http 任务等【异步任务】按照先后顺序插⼊到【任务队列】中，等待执⾏栈清空，再检测本次的宏任务中注册的所有微任务进行执行清空。

代码运行分区

宏任务微任务详解

4. 所以正确的一次 Event loop 顺序是这样的

• 执行同步代码，这属于宏任务
• 执行栈为空，查询本次是否有微任务需要执行
• 执行所有微任务
• 必要的话渲染 UI
• 然后开始下一轮 Event loop，执行宏任务-微任务的循环

5. 关于执行栈

先进后出，后进先出。无限制的递归会导致执行栈溢出，eg:

var i = 0;
function task(){
 i++
 console.log(`递归了${i}次`)
 task()
}
task()

栈溢出

跨越递归限制：

var i = 0;
function task(){
 i++
 console.log(`递归了${i}次`)
 //使⽤异步任务来阻⽌递归的溢出
 setTimeout(function(){
 task()
 },0)
}
task()

使用异步任务进行调用，会先把异步内容挂起，等待执行栈清空再进行异步内容的入栈执行和出栈，依次无限循环

6. 特殊任务

关于requestAnimationFrame函数的执⾏频率是每秒钟60次左右，是根据浏览器相关的，所以和其他timer类的宏任务的执行时机不确定，可能在之前可能在之后。

setTimeout(function() {console.log('timer1')}, 0)
requestAnimationFrame(function(){
 console.log('UI update')
})
setTimeout(function() {console.log('timer2')}, 0)
new Promise(function executor(resolve) {
 console.log('promise1')
 resolve()
 console.log('promise2')
}).then(function() {
 console.log('promise.then')
})
console.log('end')
// 结果：
// promise1  promise2  end  promise.then  (UI update)  timer1  timer2  (UI update)

关于事件

document.addEventListener('click', function(){
 Promise.resolve().then(()=> console.log(1));
 console.log(2);
})
document.addEventListener('click', function(){
 Promise.resolve().then(()=> console.log(3));
 console.log(4);
})
// 2 1 4 3

解析：当元素被点击时，两个事件会按照先后的注册顺序放⼊异步任务队列中进⾏执⾏，所以事件1和事件2 会按照代码编写的顺序触发。由于事件执⾏时并不会阻断JS默认代码的运⾏，所以事件任务也是异步任务，并且是宏 任务，所以两个事件相当于按顺序执⾏的两个宏任务

即顺序：同步代码（挂起click事件异步代码）-> 点击触发 -> 执行第一个异步代码宏任务(其中先执行同步代码2再微任务1) -> 执行第二个异步代码宏任务(其中先执行同步代码4再微任务3)