前言

本文将介绍 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);

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