526互联

js 浏览器的5种observer 第五种 ReportingObserver 详解及使用方法

发布时间 2023-09-12 18:59:57作者: 完美前端

 

在前端开发中，对于浏览器的报告信息，例如弃用的 API 使用、浏览器的干预、CSS 特性使用情况等，我们常常需要一种机制来收集和处理。这时，ReportingObserver API 就发挥了它的作用。

什么是 ReportingObserver？

// ReportingObserver 是一个浏览器 API，它可以用来监听来自浏览器的各种报告信息。这些信息可能包括：
// - 弃用的 API 使用
// - 浏览器的干预
// - CSS 特性使用情况
// - ...等其他类型的报告。

使用方法

// 创建一个 ReportingObserver:
const observer = new ReportingObserver((reports, observer) => {
    for (const report of reports) {
        console.log(report.type, report.url, report.body);
    }
}, {types: ['deprecation'], buffered: true});

// 开始监听:
observer.observe();
在上面的示例中，我们创建了一个新的 ReportingObserver 实例，并指定了一个回调函数来处理收到的报告。我们还通过 `types` 选项指定了我们想要监听的报告类型，这里我们只监听了 `deprecation` 类型。`buffered` 选项表示我们还想要接收到在此 observer 创建之前生成的报告。

常见应用场景

// 1. 监听弃用的 API 使用，及时了解和替换过时的代码。
// 2. 捕获浏览器的干预报告，如何浏览器为了性能或安全而阻止了某些操作。
// 3. 监测 CSS 特性的使用情况，确保不使用不建议或过时的 CSS 属性或值。

浏览器兼容性

ReportingObserver 的支持度还不是非常广泛，但一些现代浏览器已经开始支持了，具体的支持列表可以查看：查看兼容.