带你深入理解js事件循环机制

同步任务和异步任务（微任务和宏任务）

JavaScript是一门单线程语言

分为同步任务和异步任务

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。

异步任务指的是，不进入主线程、而进入"任务队列"的任务；只有等主线程任务全部执行完毕，"任务队列"的任务才会进入主线程执行。

异步任务分为宏任务和微任务

new promise()、console.log()属于同步任务

宏任务（macrotask） 微任务（microtask）
谁发起的 宿主（Node、浏览器） JS引擎
具体事件 1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js） 1. Promise 2. MutaionObserver 3. Object.observe（已废弃；Proxy 对象替代） 4. process.nextTick（Node.js）
谁先运行 后运行 先运行
会触发新一轮Tick吗 会 不会

带你深入理解js事件循环机制

执行过程: 同步任务 —> 微任务 —> 宏任务

1.先执行所有同步任务，碰到异步任务放到任务队列中
2.同步任务执行完毕，开始执行当前所有的异步任务
3.先执行任务队列里面所有的微任务
4.然后执行一个宏任务
5.然后再执行所有的微任务
6.再执行一个宏任务，再执行所有的微任务·······依次类推到执行结束。

3-6的这个循环称为事件循环Event Loop

事件循环是JavaScript实现异步的一种方法，也是JavaScript的执行机制

async/await （重点）

（个人注解：async/await 底层依然是 Promise，所以是微任务，只是 await 比较特殊）

async

当我们在函数前使用async的时候，使得该函数返回的是一个Promise对象

async function test() {return 1 // async的函数会在这里帮我们隐士使用Promise.resolve(1)
}
// 等价于下面的代码
function test() { return new Promise(function(resolve, reject) { resolve(1) })
}
// 可见async只是一个语法糖，只是帮助我们返回一个Promise而已

await

await表示等待，是右侧「表达式」的结果，这个表达式的计算结果可以是 Promise 对象的值或者一个函数的值（换句话说，就是没有特殊限定）。并且只能在带有async的内部使用

使用await时，会从右往左执行，当遇到await时， ★★★★★会阻塞函数内部处于它后面的代码，去执行该函数外部的同步代码，当外部同步代码执行完毕，再回到该函数内部执行剩余的代码★★★★★, 并且当await执行完毕之后，会先处理微任务队列的代码

示例

//1
console.log('1');//2
setTimeout(function() {console.log('2');process.nextTick(function() {console.log('3');})new Promise(function(resolve) {console.log('4');resolve();}).then(function() {console.log('5')})
})
//3
process.nextTick(function() {console.log('6');
})
//4
new Promise(function(resolve) {console.log('7');resolve();
}).then(function() {console.log('8')
})
//5
setTimeout(function() {console.log('9');process.nextTick(function() {console.log('10');})new Promise(function(resolve) {console.log('11');resolve();}).then(function() {console.log('12')})
})
// 先执行1 输出1
// 执行到2，把setTimeout放入异步的任务队列中（宏任务）
// 执行到3，把process.nextTick放入异步任务队列中（微任务）
// 执行到4，上面提到promise里面是同步任务，所以输出7，再将then放入异步任务队列中（微任务）
// 执行到5，同2
// 上面的同步任务全部完成，开始进行异步任务
// 先执行微任务，发现里面有两个微任务，分别是3，4压入的，所以输出6 8
// 再执行一个宏任务，也就是第一个setTimeout
// 先输出2，把process.nextTick放入微任务中，再如上promise先输出4，再将then放入微任务中
// 再执行所以微任务输出输出3 5
// 同样的，再执行一个宏任务setTImeout2，输出9 11 在执行微任务输出10 12
// 所以最好的顺序为：1 7 6 8 2 4 3 5 9 11 10 12 

async function async1() {console.log( 'async1 start' )await async2()console.log( 'async1 end' )
}
async function async2() {console.log( 'async2' )
}
console.log( 'script start' )
setTimeout( function () {console.log( 'setTimeout' )
}, 0 )
async1();
new Promise( function ( resolve ) {console.log( 'promise1' )resolve();
} ).then( function () {console.log( 'promise2' )
} )
console.log( 'script end' )
// 首先执行同步代码，console.log( 'script start' )
// 遇到setTimeout,会被推入宏任务队列
// 执行async1(), 它也是同步的，只是返回值是Promise，在内部首先执行console.log( 'async1 start' )
// 然后执行async2(), 然后会打印console.log( 'async2' )
// 从右到左会执行, 当遇到await的时候，阻塞后面的代码，去外部执行同步代码
// 进入new Promise,打印console.log( 'promise1' )
// 将.then放入事件循环的微任务队列
// 继续执行，打印console.log( 'script end' )
// 外部同步代码执行完毕，接着回到async1()内部, 继续执行 await async2() 后面的代码，执行 console.log( 'async1 end' ) ，所以打印出 async1 end 。（个人理解：async/await本质上也是Promise，也是属于微任务的，所以当遇到await的时候，await后面的代码被阻塞了，应该也是被放到微任务队列了，当同步代码执行完毕之后，然后去执行微任务队列的代码，执行微任务队列的代码的时候，也是按照被压入微任务队列的顺序执行的）
// 执行微任务队列的代码, 打印 console.log( 'promise2' )
// 进入第二次事件循环，执行宏任务队列, 打印console.log( 'setTimeout' )
/**
 * 执行结果为：
 * script start
 * async1 start
 * async2
 * promise1
 * script end
 * async1 end
 * promise2
 * setTimeout
 */ 

console.log(1);
async function fn(){console.log(2)new Promise((resolve)=>{resolve();}).then(()=>{console.log("XXX")})await console.log(3)console.log(4)
}
fn();
new Promise((resolve)=>{console.log(6)resolve();
}).then(()=>{console.log(7)
})
console.log(8)
// 执行结果为：1 2 3 6 8 XXX 4 7
/*
前面的 1 2 3 6 8 不再解析，重点是后面的 XXX 4 7，由此可见 await console.log(3) 之后的代码 console.log(4) 是被放入到微任务队列了，
代码 console.log("XXX") 也是被压入微任务队列了，console.log("XXX")是在 console.log(4) 之前，
所以当同步任务执行完毕之后，执行微任务队列代码的时候，优先打印出来的是 XXX ，然后才是 4 。
*/ 

console.log(1);
async function fn(){console.log(2)await console.log(3)await console.log(4)await console.log("await之后的：",11)await console.log("await之后的：",22)await console.log("await之后的：",33)await console.log("await之后的：",44)
}
setTimeout(()=>{console.log(5)
},0)
fn();
new Promise((resolve)=>{console.log(6)resolve();
}).then(()=>{console.log(7)
})
console.log(8)
/**
 * 执行结果为：
 * 1
 * 2
 * 3
 * 6
 * 8
 * 4
 * 7
 * await之后的： 11
 * await之后的： 22
 * await之后的： 33
 * await之后的： 44
 * 5
 */
/*
由此可见，代码执行的时候，只要碰见 await ，都会执行完当前的 await 之后，
把 await 后面的代码放到微任务队列里面。但是定时器里面的 5 是最后打印出来的，
可见当不断碰见 await ，把 await 之后的代码不断的放到微任务队列里面的时候，
代码执行顺序是会把微任务队列执行完毕，才会去执行宏任务队列里面的代码。
*/ 

Promise.resolve().then(() => {console.log(0);return Promise.resolve(4) // 顺延2位如果是return 4 则打印 0、1、4、2、3、5、6、7
}).then(res => console.log(res))
Promise.resolve().then(() => {console.log(1);
}).then(() => {console.log(2);
}).then(() => {console.log(3);
}).then(() => {console.log(5);
}).then(() => {console.log(6);
}).then(() => {console.log(7);
})
/*
此题主要注意的是原生的Promise的then方法中，如果返回的是一个普通值，则返回的值会被立即调用并赋值给resolve函数，
如果返回的是一个thenable，则then方法将会被放入到微队列中执行，
如果返回的是一个Promise.resolve，则会再加一次微任务队列。
即微任务后移，Promise.resolve本身是执行then方法，而then方法本身是在微任务队列中执行，
同时return Promise.resolve时是将resolve调用的返回值 作为上级then中resolve的参数传递，
调用外层then方法时本身是在微队列里面，所以函数的执行顺序是要在微队列中下移两次。
*/

根据w3c的最新解释

随着浏览器的复杂度急剧提升 W3C不再使用宏队列的说法

在目前chrome的实现中 至少包含了下面的队列

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如：
// 立即把一个函数添加到微队列
Promise.resolve().then(函数)

任务有优先级吗？

// 立刻把一个函数添加到微队列 最高执行
promise.resolve().then(函数)
setTimeOut(()=>{ // 第三步执行延时队列中的任务console.log(1);
},0)
promise.resolve().then(()=>{ // 第二步执行微队列中的任务console.log(2);
})
console.log(3); // 第一步先执行全局js
// 3 2 1

面试题

1、如何理解 JS 的异步？

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

2、 阐述一下js的事件循环

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

3、JS 中的计时器能做到精确计时吗？为什么？

不行，因为：

1.计算机硬件没有原子钟，无法做到精确计时
2.操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
3.按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
4.受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
带你深入理解js事件循环机制
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：
带你深入理解js事件循环机制
带你深入理解js事件循环机制
带你深入理解js事件循环机制
带你深入理解js事件循环机制

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

标签 , ,

发表回复