其他分享
首页 > 其他分享> > 跟我学浏览器事件环

跟我学浏览器事件环

作者:互联网

1. 什么是浏览器事件环

我们知道,在javascript 中,有定时器setTimeout、服务请求ajax、ui渲染、还有些Promise等,浏览器在解析这些代码时,不是同步进行的。比如setTimeout要等到时间到时才会执行,ajax要等到服务端响应后才会拿到返回数据。
那么浏览器如何知道什么时候该去处理setTimeout或者ajax,方法就是,一轮一轮循环,这就形成了浏览器事件环。

2. 宏任务和微任务

先明白这两个概念

3. 事件环模型

直接看图

学习浏览器事件环,理解这一个图就行了
解释下

  1. js所有代码先执行,遇到宏任务和微任务,就把他们交给对应的线程,各自在各自的线程里执行
  2. ajaxsetTimeoutPromise等这些异步操作都有各自的线程,比如setTimeout在自己的线程执行,时间到时,会把回调放到宏任务队列中;同理,Promise等到then后,会把回调放到微任务队列中。
  3. 第一步的js代码全部执行完成后,首先会清空所有的微任务。
  4. 在第三步清空所有微任务队列时,此时还可能遇到微任务或者宏任务,也一样,将遇到的微任务加入到此时微任务的末尾,在此次清空微任务队列过程中加入的也会被清空掉,宏任务加入到宏任务队列。
  5. 而后进行一次ui渲染
  6. 从宏任务队列中取出第一个执行(每轮循环只执行一个宏任务,微任务是全部执行)
  7. 宏任务代码执行时同样可能会再次遇到宏任务和微任务,遇到时再次将他们加入到对应的任务队列
  8. 此任务执行完毕后再次取出微任务队列执行,再次清空微任务。
  9. 渲染页面
  10. 然后再次从宏任务队列中取出一个宏任务执行,如此循环直到任务队列都被清空

记住几点

  1. 每轮循环中,微任务全部清空,宏任务只拿出一个执行
  2. 微任务清空后,是进行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

原因:

  1. 遇到setTimeout交给setTimeout的线程执行,定时器是0秒,线程立即把回调放到宏任务队列中
  2. 遇到new Promise,注意new Promise的回调是立即执行的,先打印出3,把then放到微任务队列中
  3. 遇到Promise.resolve,把5放到微任务队列中
  4. 主代码执行完毕,接着清空微任务
  5. 微任务队列中,第一个放进去的是4,打印出4
  6. 第二个微任务是5,打印出5,在执行5时,又遇到微任务6,加入到尾部队列中,接着执行6的微任务,打印出6
  7. 微任务6执行时,遇到setTimeout,交给setTimeout线程处理,setTimeout线程会在1秒后把回调放到宏任务队列中
  8. 微任务6执行完,遇到微任务8,同理也会一块清空8,打印出8
  9. 此时微任务清空完毕,拿出一个宏任务执行,打印1
  10. 宏任务1执行时,遇到微任务2,加入微任务队列中
  11. 接着清空所有微任务,打印2
  12. setTimeout线程1秒后,把7加入宏任务队列中,最后会打印出7

标签:跟我学,浏览器,log,队列,任务,Promise,事件,console,setTimeout
来源: https://www.cnblogs.com/wu-student/p/15692757.html