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顺序不一致的状况。