Karam
Articles34
Tags31
Categories11
宏任务和微任务

宏任务和微任务

宏任务

由于JS是单线程语言,所以浏览器使用了普通消息队列和延迟消息队列来维持主线程上任务的执行,这些消息队列任务就称为宏任务
如果JS只有宏任务,如果两个任务之间的时间间隔特别大,就会有问题,执行时间无法精准控制

微任务

异步回调的实现方法有两种,一种是直接放入消息队列的末尾,另一种是执行时机就是主函数执行结束之后,宏任务结束之前,也就是微任务
在创建Javascript脚本的时候V8引擎会为其创建一个执行上下文,在这个同时也会创建微任务队列,每个宏任务都关联了一个微任务队列

什么时候产生

  1. DOM节点发生变化的时候
  2. Promise执行Promise.resolve或者Promise.reject()的时候

    什么时候执行

    当Javascript快执行完的时候,Javascript准备退出全局执行上下文并清空调用栈的时候,执行微任务队列,如果在执行微任务队列的时候又产生了新的微任务,会一直循环微任务队列,知道微任务队列为空

    结论

  • 宏任务和微任务是绑定的,每个宏任务创建的时候会创建一个自己的微任务队列
  • 微任务的执行时长会影响到宏任务的执行时长
  • 微任务的执行会早于宏任务的执行

    监听DOM变化的演变

    最开始使用settimeout和setInterval来轮询监听DOM,但是非常消耗性能,后来改用Mutation Event观察者模式,只要监听到DOM改变就调用函数,但是依旧非常消耗性能,所以这个方案也被弃用了,最后引入了MutationObserver,等待多次DOM操作,然后一次一部触发,并且使用一个数据结构来记录所有DOM变化