几个高级的JS API
# 前言
本文将介绍 4 个高级的 JS API，分别是：MutationObserver、ResizeObserver、IntersectionObserver、PerformanceObserver、 getComputedStyle、getBoundingClientRect、requestAnimationFrame。
# 变动观察器 MutationObserver
MutationObserver 是一个可以监听 DOM 树变化的 API，可以实时监听 DOM 对象树的任何变化，包括添加、删除、修改、移动等。它的使用方法如下：
使用例子如下
// 回调函数: mutations为变化数组,即节点变化记录列表，observer为MutationObserver对象
var callback = function (mutations, observer) {};
// observer的配置选项
// attributes: 表示监听目标的节点的属性值是否变化,默认为false
// childList: 表示监听目标的节点的子节点是否变化,比如添加或者删除目标子节点,不包括修改子节点以及子节点后代的变化,默认为false,
// characterData: 表示监听目标的节点的文本内容是否变化,默认为false
// subtree: 表示监听目标的后代节点是否变化,默认为false
// attributeOldValue: 表示是否记录属性变化前的值,默认为false
// attributeFilter: 表示监听目标的属性变化,默认为null
// characterDataOldValue: 表示是否记录文本变化前的值,默认为false
var config = { attributes: true, childList: true, characterData: true };
// 创建一个观察者实例并传入回调函数
var observer = new MutationObserver(callback);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
MutationObserver的实例方法
- 1.observe(target, config): 开始监听目标元素的变化
- 2.disconnect(): 停止监听目标元素的变化
- 3.takeRecords(): 返回一个数组，包含所有已触发的监听事件
# ResizeObserver
ResizeObserver是一个JavaScript API，用于监听DOM元素的尺寸和位置的变化。它可以观察一个或多个DOM元素,适用于响应式设计和自适应布局
ResizeObserver的回调是异步执行的，所以可以在回调函数中执行一些耗时的操作，如计算性能指标等。另外它还避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现优化。如果浏览器遵循规范，则只会在绘制前或布局后触发调用。
ResizeObserver是一个构造函数,在实例化时传入一个回调函数，回调函数可以接受一个参数，该参数是一个数组包含所有被观察的DOM元素。`
# IntersectionObserver
IntersectionObserver 又称交叉观察者，当元素出现在视口时会触发
# PerformanceObserver
PerformanceObserver可以观察页面性能，包括资源加载、渲染、用户交互等。`
# getComputedStyle
# getBoundingClientRect
# requestAnimationFrame
编辑 (opens new window)
上次更新: 2024/05/24, 03:31:26