浏览器窗口中几种常用的Observer

在JavaScript中有一群神秘的观察者，默默地监视着网页的一举一动，本次我们一起深入了解这些观察者，并学习如何利用它们来提升我们的网页互动性。

MutationObserver

侦听页面DOM结构变化

js 复制代码

// 创建一个MutationObserver实例来监视DOM变化
const bodyObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(`DOM结构发生变化：${mutation.type}`);
  });
});

// 开始监视文档的body结构变化
bodyObserver.observe(document.body, { attributes: true, childList: true, subtree: true });

// 不再侦听时
bodyObserver.disconnect();

IntersectionObserver

主要用于侦听元素进入可视区

js 复制代码

// 创建一个IntersectionObserver实例
const lazyDetective = new IntersectionObserver((entries) => {

  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('目标进入视线，行动！');

      // 假设我们要懒加载图片
      entry.target.src = entry.target.dataset.src;
      lazyDetective.unobserve(entry.target); // 任务完成，停止观察
    }
  });

});

// 监视页面中的所有懒加载图片
document.querySelectorAll('img[data-src]').forEach((img) => {
  lazyDetective.observe(img);
});

ResizeObserver

侦听页面缩放

js 复制代码

// 创建一个ResizeObserver实例来监视元素的大小变化
const sizeSpy = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    console.log(`侦测到尺寸变化：${entry.target.id} 现在的尺寸是 ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
  });
});

// 开始监视一个特定元素的大小
sizeSpy.observe(document.querySelector('#myElement'));

PerformanceObserver

侦听页面性能

认识一下performance对象

performance对象是window对象的一个属性。
它允许你获取到当前页面的性能相关数据，如页面加载时间、解析DOM所需的时间等。
此外，它还提供了一系列方法，如performance.mark()和performance.measure()，这些方法可以用来创建自定义的性能标记和测量，帮助开发者监控和分析代码执行性能。
简而言之，performance是一个强大的工具，它使得性能监控和分析变得更加直接和便捷。

步骤 1: 添加性能标记

首先，我们在代码的关键点添加性能标记。这些标记可以帮助我们测量代码执行的关键部分所需的时间。

js 复制代码

// 标记开始加载图片

performance.mark('startLoadImage');

// 假设这里有一个函数用于加载图片，加载完成后会调用回调函数

loadImage('example.jpg', () => {

  // 图片加载完成，标记结束时间

  performance.mark('endLoadImage');

  // 添加一个性能测量，计算加载图片所需的时间

  performance.measure('loadImageDuration', 'startLoadImage', 'endLoadImage');

});

步骤 2: 使用PerformanceObserver来监控性能条目

接下来，我们使用PerformanceObserver来监控这些性能条目，并获取我们刚才添加的标记和测量的数据。

js 复制代码

// 创建一个PerformanceObserver实例来监听mark和measure事件

const observer = new PerformanceObserver((list) => {

  const entries = list.getEntries();

  entries.forEach((entry) => {

    console.log(`名称：${entry.name}，类型：${entry.entryType}，持续时间：${entry.duration}`);

  });

});

// 开始观察mark和measure类型的性能条目

observer.observe({entryTypes: ['mark', 'measure']});

示例解释

在这个例子中，我们首先使用performance.mark方法在图片开始加载和加载完成时分别添加了两个性能标记（startLoadImage和endLoadImage）。
然后，我们使用performance.measure方法添加了一个性能测量（loadImageDuration），它计算了从startLoadImage到endLoadImage的时间差，即加载图片所需的时间。
接着，我们创建了一个PerformanceObserver实例，并通过其observe方法指定我们只关注mark和measure类型的性能条目。
当这些类型的性能事件发生时，PerformanceObserver会自动收集这些事件的数据，并通过回调函数提供给我们。
在回调函数中，我们遍历所有收集到的性能条目，并打印出它们的名称、类型和持续时间。
通过这种方式，我们可以非常方便地监控和分析网页或应用中特定操作的性能，进而找到性能瓶颈并进行优化。