HTML5新增的5个Observer(观察器)

MutationObserver

• 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知
• 详细用法见Mutation Observer API - JavaScript 教程 - 网道 (wangdoc.com)

用法

function callback(mutations, observer){
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
}
var observer = new MutationObserver(callback);

var el = document.querySelector('article');

var  options = {
  'childList': true,
  'attributes':true
} ;
// 启动监听
observer.observe(el, options);

// 停止监听
observer.disconnect();

// takeRecords()方法用来清除变动记录
observer.takeRecords()

IntersectionObserver

• 可以自动“观察”元素是否可见(元素刚出现在可视窗口或完全消失于可视窗口)。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做“交叉观察器”（intersection oberserver）
• 详细用法见IntersectionObserver - Web API 教程 - 网道 (wangdoc.com)

用法

// callback 会触发两次(开始可见,完全离开)
function callback(entries, observer){
// entries是一个数组，每个成员都是一个`IntersectionObserverEntry`对象
// ...todo
}
options ={
threshold: [0, 0.25, 0.5, 0.75, 1],
root: document.querySelector('.container'),
rootMargin: '0px 0px -200px 0px'
}

// 开始观察
const el = document.getElementById('example')

var observer = new IntersectionObserver(callback, options);
observer.observe(el);

observer.observe(el);

// 停止观察
observer.unobserve(el);

// 关闭观察器
observer.disconnect();

ResizeObserver

• 监听元素的大小(尺寸)变化
• 详情用法见ResizeObserver - Web API 接口参考 | MDN (mozilla.org)

用法

function callback(entries){
    for (const entry of entries) {
        // ...todo
    }
}
const observer = new ResizeObserver(callback)
const el = document.querySelector("h1");

const options = {
    box: content-box(默认)|border-box
}
// 开始监听
observer.observe(el,options)

// 取消指定元素的监听
observer.unobserve(el)

// 取消对所有元素监听
observer.disconnect()

PerformanceObserver

• 监听页面的性能变化
• 详情用法见PerformanceObserver() - Web API 接口参考 | MDN (mozilla.org)

用法

function callback(entries,observer){
    entries.getEntries().forEach(item=>{
        console.log(item)
    })
}
const observer = new PerformanceObserver(callback);

const options = {
    entryTypes: ["mark", "frame/navigation","resource","measure","paint"]
}
// 开始监听
observer.observe(options);

// 停止监听
observer.disconnect

// 返回当前存储在性能观察器中的`性能条目`列表，并将其清空。
const PerformanceEntry[] = observer.takeRecords();

ReportingObserver

• 一个实验性的 API，允许你收集和访问性能报告

用法

// 创建一个 ReportingObserver 实例
function callback(reports, observer){
  for (const report of reports) {  
    console.log(report.type, report.url, report.body);  
  }  
}
const options ={
    types: ['deprecation'], 
    buffered: true
}
const observer = new ReportingObserver(callback, options);  
  
// 开始收集报告  
observer.observe();

// 停止收集报告
observer.disconnect

// 返回当前收集的报告，并将其清空。
const PerformanceEntry[] = observer.takeRecords();