共计 1741 个字符,预计需要花费 5 分钟才能阅读完成。
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
正文完
发表至: javascript
2021-12-15