【JS】详解浏览器的5 种Observer: Mutation、Intersection、Performance、Resize、Reporting

网页开发中我们经常要处理用户交互，我们会用 addEventListener 添加事件监听器来监听各种用户操作，比如 click、mousedown、mousemove、input 等，这些都是由用户直接触发的事件。

那么对于一些不是由用户直接触发的事件呢？ 比如元素从不可见到可见、元素大小的改变、元素的属性和子节点的修改等，这类事件如何监听呢？

浏览器提供了 5 种 Observer 来监听这些变动：IntersectionObserver、MutationObserver、ResizeObserver、PerformanceObserver、ReportingObserver。

1、IntersectionObserver 交叉观察器

IntersectionObserver是一个 Web API，它可以异步地监测一个元素与其祖先或顶级文档视口之间的交叉状态。它会告诉我们目标元素是否进入或离开了视口，或者与其他元素重叠。

</