IntersectionObserver

# 浏览器中好用的 Observer Api ## 简介网页开发中经常会处理用户交互相关的事件。随着我们的需求越来越复杂，有很多的场景浏览的事件机制不能很好，或者说不能很快速的实现我们的需求。比如： * 页面水印需要防止水印元素被篡改。 * 在实现图片懒加载的时候，我们需要判断元素是否出现在了可视区域内。 * 在一些复杂的交互中，我们需要判断元素的大小是否发生了变化。目前浏览器提供了 5 种很好用的 `Observer Api`，可以很方便的实现上面的需求。 * [MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)：用来监听 `DOM` 树的变动 * [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)：用来监听两个元素是否相交 * [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API)：用来监听元素的大小更改 * [PerformanceObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver)：浏览器渲染页面过程中有一些关键的渲染时间点，可以用这个 `api` 监听到 * [ReportingObserver](https://developer.mozilla.org/en-US/docs/Web/API/ReportingObserver)：浏览器使用过时的 `api` 或者浏览器对我们 `api` 执行有干预的时候会触发监听 `Observer Api` 属于**微任务**，优先级小于 `Promise`，每一个`Observer `在创建的时候会调用一次，然后每次监听的相关事件触发的时候会执行回调。接下来我会对这几个 `API` 的使用、兼容性、`polyfill` 做一些介绍。 ## IntersectionObserver 相交观察者，可以很方便的检测一个元素是否可见或者两个元素是否相交 ### [兼容性](https://caniuse.com/?search=IntersectionObserver) ![image-20231029151456547.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2de8f4f4f2854fee98764ff754f901a0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1377&h=761&s=124612&e=png&b=ede0c7) ### [polyfill](https://github.com/w3c/IntersectionObserver) 具体见链接`readme`说明，官方的`polyfill`，`good` ### 小案例图片懒加载案例，核心逻辑是将`src`使用`data-src`进行替换，当图片进入视口的时候赋值`src`属性。 #### 代码 ```html IntersectionObserver

文字内容

``` #### 预览 ![1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26abd8649aa94e32b9d82a92ee6f24ff~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1088&h=708&s=5158808&e=gif&f=166&b=fcfbfe) ### 详细使用 `IntersectionObserver API` 是一个相交观察器，用于监听 **目标元素** 与指定的 **root 元素（祖先元素或视窗）** 的相交状态（**可见性**）。 * 目标元素进入 `root` 元素的时候会触发回调 * 目标元素离开 `root` 元素的时候会触发回调 ![image-20231029155937913.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78cf55407dc040288fe11e0acb536a3b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=755&h=591&s=8745&e=png&b=ffffff) #### 构造函数 ```js const observer = new IntersectionObserver(callback, options); ``` #### options ```js let options = { root: document.querySelector('#app'), rootMargin: '0px', threshold: 1.0, }; ``` * `root`：指定 `root` 元素，用于检查目标元素的可见性。必须是目标元素的父级元素。如果未指定或者为`null`，则默认为浏览器视窗。 * `rootMargin`：配置 `root` 元素的 `margin` 值，写法同 `css margin` 写法。用来扩大检查相交的范围。默认值是 0。 * `threshold`：相交门槛。可以是单一数值，也可以是数字数组。目标元素和 root 元素相交的范围达到该值的时候，触发回调，默认值是 0。 * 0 表示只要有一个像素的相交就会触发回调函数 * 1 表示完全相交才会触发回调函数 * \[0, 0.25, 0.5, 0.75, 1.0] 表示会触发 5 次回调函数，分别是，刚相交、相交范围达到 25%、相交范围达到 50%、相交范围达到 75%、完全相交的时候会触发回调函数。 #### callback 发生`相交`的回调 * `entries`参数：返回当前`已监听`的`目标元素`的`相交信息`集合 * `observer`参数：当前的观察者 ```js let callback = (entries, observer) => { entries.forEach((entry) => { console.log(entry); }); }; ``` 每一个 `entry(相交信息)` 有如下属性： * `time`：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒 * `target`：被观察的目标元素 * `rootBounds`：`root` 元素的矩形区域的信息，和`getBoundingClientRect()`方法的返回值一致 * `boundingClientRect`：目标元素的矩形区域的信息 * `intersectionRect`：目标元素与视口（或根元素）的交叉区域的信息 * `intersectionRatio`：目标元素的**可见比例**，即`intersectionRect`占`boundingClientRect`的比例，完全可见时为`1`，完全不可见时小于等于`0` * `isIntersecting`：**是否发生相交**，`true`表示相交，`false`表示没有相交对 `entries` 是一个集合做一些补充：上面案例中，监听的写法可以有下面两种： * 对每一个 `img` 创建一个 `observer` ```js const imgs = document.querySelectorAll('img'); imgs.forEach((img) => { const observer = new IntersectionObserver((entry) => {}); observer.observe(img); }); ``` * 创建一个 `observer`，监听每一个 `img` ```js const imgs = document.querySelectorAll('img'); const observer = new IntersectionObserver((entry) => {}); imgs.forEach((img) => { observer.observe(img); }); ``` 当第二种写法的时候，元素是横向排列的，并且同时间相交的元素有多个，`entries` 就会返回每一个相交的元素，如下图 ![1.webp](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24d45754b4df4775bf265113d5734883~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=639&h=330&s=63742&e=webp&f=51&b=fcfcfc) #### observer 实例实例的`observe`方法可以指定观察哪个 `DOM` 节点。 ```javascript // 开始观察 el元素 observer.observe(el); // 停止观察 el元素 observer.unobserve(el); // 销毁观察器 observer.disconnect(); // 返回所有观察目标的 entry 对象数组 observer.takeRecords(); ``` ## MutationObserver 变化观察者，可以很方便的 `Dom` 树的变动，如元素属性的变动，子节点的增删。只能监听到子元素的删除，监听节点的删除监听不到，所以需要监听当前节点删除的时候，需要监听父元素的子元素变化。 ### [兼容性](https://caniuse.com/?search=MutationObserver) ![image-20231029151530026.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8525a15b8bfc49bdbf8c5d2fbf19fdab~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1377&h=583&s=92727&e=png&b=ede0c7) 提一嘴，`MutationObserver` 是这几个 `Observer API`中兼容性最好的 ### [polyfill](https://github.com/googlearchive/MutationObservers) 具体见链接`readme`说明，官方的`polyfill`，`good` ### 小案例删不掉的水印，使用 `MutationObserver` 实现，对 `body` 进行监听，处理水印元素被删除的场景，监听水印元素的所有 `dom` 操作，用来防止被篡改。 #### 代码 ```html MutationObserver

假设我是一个水印节点

``` #### 预览 ![2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1adac3dabb44453819f1571a79043c9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1264&h=532&s=512545&e=gif&f=227&b=fcfbfe) ### 详细使用 ```js const observer = new MutationObserver(callback); const targetNode = document.querySelector('#someElement'); const observerOptions = { childList: true, // 观察目标子节点的变化，是否有添加或者删除 attributes: true, // 观察属性变动 subtree: true, // 观察后代节点，默认为 false }; observer.observe(targetNode, observerOptions); ``` #### 构造函数 ```js const observer = new MutationObserver(callback); ``` #### observer 实例 ```js // 开始观察 el元素 observer.observe(el, observeOptions); // 销毁观察器 observer.disconnect(); // 返回所有观察目标的 entry 对象数组 observer.takeRecords(); ``` [observeOptions](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe#options)：可选的配置对象，用来描述 DOM 的哪些变化应该触发回调。`childList`、`attributes` 和 `characterData` 中，必须有一个参数为 `true`。否则会抛出 `TypeError` 异常。 * `subtree` 可选，当为 `true` 时，将会监听以 `target` 为根节点的**整个子树**。包括子树中所有节点的属性。默认值为 `false`。 * `childList` 可选，当为 `true` 时，**监听 `target` 节点中发生的节点**的新增与删除。默认值为 `false`。 * `attributes`可选，当为 `true` 时观察所有监听的节点属性值的变化。默认值为 `true`，当声明了 `attributeFilter` 或 `attributeOldValue`，默认值则为 `false`。 * `attributeFilter`可选，用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。 * `attributeOldValue`可选，当为 `true` 时，记录上一次被监听的节点的属性变化； * `characterData`可选，当为 `true` 时，监听声明的 `target` 节点上所有字符的变化。默认值为 `true`，如果声明了 `characterDataOldValue`，默认值则为 `false`。 * `characterOldValue`可选，当为 `true` 时，记录前一个被监听的节点中发生的文本变化。，默认值则为 `false`。 #### callback ```js function callback(mutationList, observer) { // ... } ``` 回调函数有两个参数 * `mutationList`：描述所有被触发改动的`MutationRecord`对象数组 * `observer`：当前的观察者 [`MutationRecord`](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecord)含有的属性介绍： * `type`: 变化的类型，`attributes`表示属性变化，`characterData`表示节点所有字符变化，`childList`表示子节点树变化。 * `target`：发生变化的节点 * `addedNodes`：如果是添加了节点，添加的节点会在这个属性表示 * `removedNodes`：如果是移出了节点，移出的节点会在这个属性表示 * `previousSibling`：返回被添加或移除的节点之前的兄弟节点，或者 `null`。 * `nextSibling`：返回被添加或移除的节点之后的兄弟节点，或者 `null`。 * `attributeName`:返回被修改的属性的属性名，或者 `null`。 * `attributeNamespace`：返回被修改属性的命名空间，或者 `null`。 * `oldValue`：对于属性 `attributes` 变化，返回变化之前的属性值。对于 `characterData` 变化，返回变化之前的数据。对于子节点树 `childList` 变化，返回 `null`。 ## ResizeObserver 尺寸变化观察者，可以很方便的监听元素大小的变化，元素`display:none`进行隐藏的时候，也是会触发监听的 ### [兼容性](https://caniuse.com/?search=ResizeObserver) ![image-20231029151556201.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97aca8519f5248b6bb0b0328d72e89de~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1377&h=567&s=82371&e=png&b=ede1c8) ### [polyfill](https://github.com/juggle/resize-observer) 具体见链接`readme`说明，社区实现的`polyfill` ### 小案例 #### 代码 ```html ResizeObserver ``` #### 预览 ![3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c429ba795023482f83f8364dfa2cb082~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=816&h=308&s=119422&e=gif&f=104&b=fdfcff) ### 详细使用 ```js const observer = new ResizeObserver(callback); const targetNode = document.querySelector('#someElement'); const observerOptions = { box: 'border-box', // 设置监听的盒模型 }; observer.observe(targetNode, observerOptions); ``` #### 构造函数 ```js const observer = new ResizeObserver(callback); ``` #### observer 实例 ```js // 开始观察 el元素 observer.observe(el, observeOptions); // 停止观察 el元素 observer.unobserve(el); // 销毁观察器 observer.disconnect(); ``` [observeOptions](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver/observe#options)：可选的配置对象，用来描述 DOM 的哪些变化应该触发回调。目前只支持`box`一个属性配置。 * `box`：设置 observer 将监听的盒模型。可能的值是： * `content-box`（默认），CSS 中定义的内容区域的大小。 * `border-box`，CSS 中定义的边框区域的大小。 * `device-pixel-content-box`，在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位。 `content box`示意图： ![content-box.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93a76b1b2c2b4c92934ea8b991a2fffd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=727&h=562&s=8966&e=png&a=1&b=93e4f0) 如果指定的 `box` 为`content-box`，那么我们修改`padding`或者 `border-width`，是不会触发回调函数的 #### callback 发生大小变化的回调 * `entrie`参数：真正在观察的 [`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 最新的大小。类型是 `ResizeObserverEntry`。 [`ResizeObserverEntry`](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry)类型介绍： * `borderBoxSize`：正在观察元素的新**边框盒**的大小。 * `contentBoxSize`：正在观察元素的新**内容盒**的大小。 * `devicePixelContentBoxSize`：正在观察元素的新**内容盒**的大小（以设备像素为单位）。 * `contentRect`：正在观察元素新大小的 `DOMRectReadOnly` 对象。这是一个遗留属性，并且在未来的版本中可能被弃用。 * `target`：对正在观察的 Element 。 ## PerformanceObserver 性能报告的观察者，用来采集页面的性能的，可以做性能上报，暂时没有涉及到相关代码，以后有机会在补充 * [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver) * [张鑫旭](https://www.zhangxinxu.com/wordpress/2023/08/js-performanceobserver-api/) ## ReportingObserver 浏览器使用过时的 `api` 或者浏览器对我们 `api` 执行有干预的时候会触发监听，暂时没有涉及到相关代码，以后有机会在补充 * [MDN](https://developer.mozilla.org/en-US/docs/Web/API/ReportingObserver)