46、深入理解浏览器中的 Observer APIs

深入理解浏览器中的 Observer APIs

1. Resize Observer API 概述

Resize Observer API 不使用记录队列系统，其回调触发间隔有严格定义。当浏览器在布局渲染阶段后检测到元素大小改变，会触发一个回调，并携带一个 ResizeObserverEntry 对象，该对象记录了目标元素的当前状态。下一次事件触发需等到下一个布局阶段，因此不会出现同一事件触发两个大小改变事件的情况，也就无需队列。

2. Intersection Observers

Intersection Observer API 可用于跟踪 DOM 元素相对于指定视口或容器元素的可见性和位置。通过创建 IntersectionObserver 实例，当被观察元素进入或离开视口时，可异步执行回调函数。该 API 在实现基于滚动的动画、图像懒加载或无限滚动等性能优化方面非常有用。

2.1 创建 IntersectionObserver 实例

创建 IntersectionObserver 实例时，需调用构造函数并传入回调函数和可选的选项对象：

let observer = new IntersectionObserver(() => console.log("Intersection!"));

若不提供选项，观察者的默认行为如下：
- 默认视口为文档视口，即整个屏幕。
- 默认阈值为 0，意味