MutationObserver与IntersectionObserver

MutationObserver

出现原因：当我们需要监听元素发生变化时，不借助使元素发生变化的业务动作的情况下，使用无污染方式监听非常困难，为了解决这个问题，MutationObserver诞生！

概述

可以用来监听DOM的任何变化，比如子元素、属性和文本内容的变化。

• 概念上，它很接近事件，可以理解为DOM发生变动就会触发Mutation Observer 事件。
• 和事件有本质不同：
  • 事件是同步触发（DOM的变动立刻会触发相应的事件）
  • Mutation Observer 则是异步触发（DOM发生变化并不会马上触发，而是等到当前所有DOM操作都结束才触发），执行时机类似宏任务。
• 设计目的：为了应对DOM变动频繁的特点。
  eg：如果不这么做，当文档中连续插入1000个<p>元素，就会连续触发1000个插入事件并执行每个事件的回调函数，这很有可能会造成浏览器的卡顿。
  而Mutation Observer完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

小结：

• Mutation Observer等待所有脚本任务完成后，才会触发。（宏任务）
• 它把所有DOM变动记录封装成一个数组进行处理，而不是单独处理每个DOM变动。
• 它既可以观察DOM的所有类型变动，也可以指定只观察某一类型的变动。