简书文章链接:浏览器事件环 - 简书
我们知道,在javascript中,有定时器setTimeout、服务请求ajax、ui渲染、还有些Promise等,浏览器在解析这些代码时,不是同步进行的。比如setTimeout要等到时间到时才会执行,ajax要等到服务端响应后才会拿到返回数据。
那么浏览器如何知道什么时候该去处理setTimeout或者ajax,方法就是,一轮一轮循环,这就形成了浏览器事件环。
先明白这两个概念
直接看图
学习浏览器事件环,理解这一个图就行了
解释下
记住下面两点就行
每轮循环中,微任务全部清空,宏任务只拿出一个执行,是一个
微任务清空后,是进行ui渲染,然后执行一个宏任务
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
原因:
这个例子理解清楚,说明你对事件环掌握了,面试问完全没问题
完
如有错误,请指正,欢迎评论交流,只写干货
页面更新:2024-03-06
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号