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

1. 什么是浏览器事件环

2. 宏工作和微工作

3. 事件环模型

4. 事件环实战