跟我学浏览器事件环
作者:互联网
1. 什么是浏览器事件环
我们知道,在javascript
中,有定时器setTimeout
、服务请求ajax
、ui渲染、还有些Promise
等,浏览器在解析这些代码时,不是同步进行的。比如setTimeout
要等到时间到时才会执行,ajax
要等到服务端响应后才会拿到返回数据。
那么浏览器如何知道什么时候该去处理setTimeout
或者ajax
,方法就是,一轮一轮循环,这就形成了浏览器事件环。
2. 宏任务和微任务
先明白这两个概念
- 宏任务:
ajax
、setTimeout
、setInterval
、I/O
、事件 - 微任务:
Promise
、process.nextTick
3. 事件环模型
直接看图
学习浏览器事件环,理解这一个图就行了
解释下
- js所有代码先执行,遇到宏任务和微任务,就把他们交给对应的线程,各自在各自的线程里执行
ajax
、setTimeout
、Promise
等这些异步操作都有各自的线程,比如setTimeout
在自己的线程执行,时间到时,会把回调放到宏任务队列中;同理,Promise
等到then后,会把回调放到微任务队列中。- 第一步的js代码全部执行完成后,首先会清空所有的微任务。
- 在第三步清空所有微任务队列时,此时还可能遇到微任务或者宏任务,也一样,将遇到的微任务加入到此时微任务的末尾,在此次清空微任务队列过程中加入的也会被清空掉,宏任务加入到宏任务队列。
- 而后进行一次ui渲染
- 从宏任务队列中取出第一个执行(每轮循环只执行一个宏任务,微任务是全部执行)
- 宏任务代码执行时同样可能会再次遇到宏任务和微任务,遇到时再次将他们加入到对应的任务队列
- 此任务执行完毕后再次取出微任务队列执行,再次清空微任务。
- 渲染页面
- 然后再次从宏任务队列中取出一个宏任务执行,如此循环直到任务队列都被清空
记住几点
- 每轮循环中,微任务全部清空,宏任务只拿出一个执行
- 微任务清空后,是进行ui渲染
4. 事件环实战
document.body.style.background = 'red';
console.log(1)
Promise.resolve().then(()=>{
console.log(2)
document.body.style.background = 'green';
})
console.log(3);
打印结果
1 3 2
另外:在页面中,是看不到红色视图的,只能看到绿色。因为先执行微任务,再进行ui渲染,微任务执行时,body的背景设置了green,覆盖red
来个复杂例子
setTimeout(() => {
console.log(1);
Promise.resolve().then(() => {
console.log(2);
});
}, 0);
new Promise((resolve) => {
console.log(3);
resolve();
}).then(() => {
console.log(4);
});
Promise.resolve()
.then(() => {
console.log(5);
})
.then(() => {
console.log(6);
setTimeout(() => {
console.log(7);
}, 1000);
})
.then(() => {
console.log(8);
});
打印结果 3 4 5 6 8 1 2 7
原因:
- 遇到
setTimeout
交给setTimeout
的线程执行,定时器是0秒,线程立即把回调放到宏任务队列中 - 遇到
new Promise
,注意new Promise
的回调是立即执行的,先打印出3,把then
放到微任务队列中 - 遇到
Promise.resolve
,把5放到微任务队列中 - 主代码执行完毕,接着清空微任务
- 微任务队列中,第一个放进去的是4,打印出4
- 第二个微任务是5,打印出5,在执行5时,又遇到微任务6,加入到尾部队列中,接着执行6的微任务,打印出6
- 微任务6执行时,遇到
setTimeout
,交给setTimeout
线程处理,setTimeout
线程会在1秒后把回调放到宏任务队列中 - 微任务6执行完,遇到微任务8,同理也会一块清空8,打印出8
- 此时微任务清空完毕,拿出一个宏任务执行,打印1
- 宏任务1执行时,遇到微任务2,加入微任务队列中
- 接着清空所有微任务,打印2
setTimeout
线程1秒后,把7加入宏任务队列中,最后会打印出7
标签:跟我学,浏览器,log,队列,任务,Promise,事件,console,setTimeout 来源: https://www.cnblogs.com/wu-student/p/15692757.html