《浏览器原理》学习笔记Day53

宏任务和微任务

• 微任务可以在实时性和效率之间做一个有效的权衡
• 为了协调页面大部分任务有条不絮的在主线程上执行，页面引入了消息队列和事件循环机制，渲染流程会维护多个消息队列，比如延迟消息队列和普通的消息队列。然后主线程采用一个for循环，不断地从这些任务队列中取出任务并执行任务。我们把这些消息队列中的任务成为宏任务。

• 事件循环机制：

  1. 先从队列中选出一个最老的任务，这个任务成为oldestTask；
  2. 然后循环系统记录任务开始执行时间，并把这个oldestTask设置为当前正在执行的任务；
  3. 当任务执行完成之后，删除当前正在执行的任务，并从对应的消息队列中删除掉这个oldestTask；
  4. 最后统计任务完成时间等信息。

• 异步回调

  • 第一种是把异步回调封装成一个宏任务，添加到消息队列尾部，当循环函数执行到该任务的时候执行回调函数。
  • 第二种方式是执行时机是在主函数执行结束之后、当前宏任务结束之前执行回调函数，这通常是以微任务形式体现的。

• 微任务

  • 微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前。

• V8内部创建的微任务队列。

  • 产生微任务的两种方式：

    • 第一种方式是使用MutationObserver监控某个DOM节点，然后再通过Javascript来修改这个节点，或者为这个节点添加、删除部分子节点，当DOM产生变化的时候就会产生DOM变化记录的微任务。
    • 第二种方式是使用Promise，当调用Promise.resolve()或者Promise.reject()的时候，也会产生微任务。
• 通过DOM节点发生变化产生的微任务和调用Promise产生的微任务都会被Javascript引擎按照顺序保存到微任务队列中。
• 微任务队列是何时被执行的？

此文章为4月Day14学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪