网页开发中我们经常要处理用户交互，我们会用 addEventListener 添加事件监听器来监听各种用户操作，比如 click、mousedown、mousemove、input 等，这些都是由用户直接触发的事件。
那么对于一些不是由用户直接触发的事件呢？ 比如元素从不可见到可见、元素大小的改变、元素的属性和子节点的修改等，这类事件如何监听呢？
浏览器提供了 5 种 Observer 来监听这些变动：MutationObserver、IntersectionObserver、PerformanceObserver、ResizeObserver、ReportingObserver。
IntersectionObserver 可以监听一个元素和可视区域相交部分的比例，然后在可视比例达到某个阈值的时候触发回调。
我们在做一些数据采集的时候，希望知道某个元素是否是可见的，什么时候可见的，就可以用这个 api 来监听，还有做图片的懒加载的时候，可以当可视比例达到某个比例再触发加载。
除了可以监听元素可见性，还可以监听元素的属性和子节点的改变：
监听一个普通 JS 对象的变化，我们会用 Object.defineProperty 或者 Proxy，而监听元素的属性和子节点的变化，我们可以用MutationObserver。
MutationObserver 可以监听对元素的属性的修改、对它的子节点的增删改。
这个可以用来做什么呢？比如文章水印被人通过 devtools 去掉了，那么就可以通过 MutationObserver 监听这个变化，然后重新加上，让水印去不掉。
除了监听元素的可见性、属性和子节点的变化，还可以监听大小变化：
窗口我们可以用 addEventListener 监听 resize 事件，那元素呢？
元素可以用 ResizeObserver 监听大小的改变，当 width、height 被修改时会触发回调。
除了元素的大小、可见性、属性子节点等变化的监听外，还支持对 performance 录制行为的监听：
浏览器提供了 performance 的 api 用于记录一些时间点、某个时间段、资源加载的耗时等。
我们希望记录了 performance 那就马上上报，可是怎么知道啥时候会记录 performance 数据呢？
用 PeformanceObserver。
PerformanceObserver 用于监听记录 performance 数据的行为，一旦记录了就会触发回调，这样我们就可以在回调里把这些数据上报。
可以看到 mark 的时间点记录、资源加载的耗时、点击按钮的 measure 时间段记录都监听到了。
有了这些数据，就可以上报上去做性能分析了。
除了元素、performance 外，浏览器还有一个 reporting 的监听：
当浏览器运行到过时（deprecation）的 api 的时候，会在控制台打印一个过时的报告:
浏览器还会在一些情况下对网页行为做一些干预（intervention），比如会把占用 cpu 太多的广告的 iframe 删掉：
会在网络比较慢的时候把图片替换为占位图片，点击才会加载：
这些干预都是浏览器做的，会在控制台打印一个报告：
这些干预或者过时的 api 并不是报错，所以不能用错误监听的方式来拿到，但这些情况对网页 app 来说可能也是很重要的：
比如我这个网页就是为了展示广告的，但浏览器一干预给我把广告删掉了，我却不知道。如果我知道的话或许可以优化下 iframe。
比如我这个网页的图片很重要，结果浏览器一干预给我换成占位图了，我却不知道。如果我知道的话可能会优化下图片大小。
所以自然也要监听，所以浏览器提供了 ReportingObserver 的 api 用来监听这些报告的打印，我们可以拿到这些报告然后上传。
ReportingObserver 可以监听过时的 api、浏览器干预等报告等的打印，在回调里上报，这些是错误监听无法监听到但对了解网页运行情况很有用的数据。
监听用户的交互行为，我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件，但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。
浏览器提供了这 5 种 Observer：
IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载
MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印
ResizeObserver：监听元素大小变化
还有两个与元素无关的：
PerformanceObserver：监听 performance 记录的行为，来上报数据
ReportingObserver：监听过时的 api、浏览器的一些干预行为的报告，可以让我们更全面的了解网页 app 的运行情况
这些 api 相比 addEventListener 添加的交互事件来说用的比较少，但是在特定场景下都是很有用的。
具体使用API可以参考 MDN
https://juejin.cn/post/7064557881492209678#heading-0