浏览器事件环

　　简书文章链接：浏览器事件环 - 简书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
　　这个例子理解清楚，说明你对事件环掌握了，面试问完全没问题
　　完
　　如有错误，请指正，欢迎评论交流，只写干货