EventLoop-浏览器篇2

最近又碰到了event loop问题，之前研究的实在是浅显（https://www.cnblogs.com/zx0423/p/12641637.html）所以今天主要讲述promise的链式调用，async/await，requestAnimationFrame以及MutationObserver()。

1、Promise链式调用

    new Promise((resolve,reject)=>{
         console.log("promise1");
         resolve();
     }).then(()=>{
         //callback1
         console.log("then11");
         new Promise((resolve,reject)=>{
             console.log("promise2");
             resolve();
         }).then(()=>{
             // callback2
             console.log("then21");
         }).then(()=>{
             // callback4
             console.log("then23");
         })
     }).then(()=>{
         // callback3
         console.log("then12");
     })

/*
1、new promsie是同步代码，立即执行
2、外部promise第一个then需要等外部promise被resolve后才执行，外部promise立即被resolve,于是执行注册的 then回调。此时外部第二then并未执行，因为他等待的是外部第一个then返回的promise
3、进入外部第一个then，回调里面是一个promise，执行内部promise时，同样两个then链式调用，内部第一个then执 行后，内部promise算执行完，返回一个新的promise给内部第二then用
4、外部第一个then执行完且有返回值，进入外部第二then
5、之后执行内部第二then
*/

解释：

// 行2 ，执行同步的executor函数

栈【 promise 】

宏任务队列【】

微任务队列【 callback1 】

执行结果：promise1

// 行7

栈【 callback1 】

宏任务队列【】

微任务队列【 callback2,callback3 】

执行结果：promise1 , then11 , promise2

//

栈【 callback2,callback3 】

宏任务队列【】

微任务队列【 callback4 】

执行结果：promise1 , then11 , promise2 , then21 , then12 ,

// 行16

栈【 callback4 】

宏任务队列【】

微任务队列【 】

执行结果：promise1 , then11 , promise2 , then21 , then12 , then23

️ 当行8添加 return 语句的时候，答案就截然不同了，大家可以自行体会一下。

2、async/await

• async函数

• 返回一个 Promise 对象

   async function test() {
       return 1;   // async的函数 在这里隐式 使用 Promise.resolve(1)
   }
   ​
   //===>等价于
   new Promise(function(resolve, reject) {
     resolve(1);
   })

• await

  每次我们使用 await, 解释器都创建一个 promise 对象，然后把剩下的 async 函数中的操作放到 then 回调函数中。async/await 的实现，离不开 Promise。

  1-await后面不是Promise对象，即是一些直接量 / 数值之类的

  • await会阻塞后面的代码，

    • 先从右到左执行,

    • 再执行async外面的同步代码，

    • 同步代码执行完，再回到async内部，

    • 把这个非promise的东西，作为 await表达式的结果。

  2-await后面是Promise对象

  • await 它会“阻塞”后面的代码，

    • 先从右到左执行,

    • 再执行async外面的同步代码，

    • 【期间不管宏任务微任务，就一直执行，直到...】

    • 直到 Promise 对象 resolved(也就是要等到了结果)，即把 resolve 的 参数/值 作为 await 表达式的运算结果。

  理清上述执行顺序，对下面这道题就可以迎刃而解了。

 // async/await 与 then链式调用
 async function f1(){
   console.log("1");
   await 'await的结果'
   console.log("3")
 }

 f1();

 new Promise(function(resolve){
   console.log("2")
   resolve();
 }).then(function(result){
   new Promise( r => r()).then(() =>{
       console.log(4)
     }).then(()=>{
     console.log(5);
   })
 })

结果： 1，2，3，4，5

3、requestAnimationFrame & MutationObserver()

基本概念：　Window.requestAnimationFrame(callback)：告诉浏览器——希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画；

　　　　　　MutationObserver()：会在指定的DOM发生变化时被调用。【微任务，很好理解，按照正常的执行顺序执行即可】

大家先来看一段代码吧，思考一下他的执行结果是什么？然后在刷新看看，结果还是不是一样的了？

<div id="testElement"></div>

 setTimeout(() => {
   console.log(performance.now(), 'settimeout');
 }, 0)

 requestAnimationFrame(() => {                  
　　  console.log(performance.now(),'requestAnimationFrame');
 })

 const testElement = document.getElementById('testElement');

 var observer = new MutationObserver(() => {
   console.log('MutationObserver');
 });

 observer.observe(testElement, {
   childList: true
 })
 //添加子节点，触发MutationObserver()
 const div = document.createElement('div');
 testElement.appendChild(div);

 new Promise(resolve => {
   console.log('promise');
   resolve();
 }).then(() => console.log('then'))

 console.log(performance.now(), 'global'); 

如图：

可以看到，requestAnimationFrame的执行顺序是不一致的，

　　起初，我将requestAnimationFrame归到宏任务中，原因是它绝大多数都会在setTimeout回调执行之后才执行。并将这个结果解释为是由于浏览器在执行渲染的时候，每次执行的时间会有差异，所以导致requestAnimationFrame和setTimeout被压入调用栈的时机不一致，也就导致了回调的时间不一致。

但是，可以看到宏任务与raf任务有明显的差异:
　　执行时机不同；
　　raf任务队列被执行时，会将其此刻队列中所有任务都执行完，既不属于宏任务/微任务，同时还排在微任务之后。

而且，在一个loop中，可能并不会执行这一步，只要浏览器任务不需要执行渲染，就会跳过。所以会出现requestAnimationFrame顺序不一致的状况。