浏览器原生 API 实战

浏览器提供了许多强大的内置 API，能够帮助开发者更高效地管理网页的加载、DOM 变化、性能监控等。本文将介绍几个关键的现代 JavaScript API：IntersectionObserver, MutationObserver, ResizeObserver 和 PerformanceObserver，并通过实际案例展示它们的应用场景。

IntersectionObserver - 交叉观察器

场景背景

以前，要实现图片懒加载或无限滚动等功能时，会遇到复杂的 DOM 操作和事件处理。现在有了 IntersectionObserver，这些问题可以迎刃而解。

API 原理

IntersectionObserver 可以高效地监听元素是否进入视口，并在元素与目标区域相交时触发回调函数。这样可以在无需频繁计算位置的情况下实现图片懒加载等功能。

示例代码

<img data-src="real-image.jpg" class="lazy" alt="加载中..."><script>
  const images = document.querySelectorAll('.lazy');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; 
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  }, { rootMargin: '100px' });

  images.forEach(img => observer.observe(img));
</script>

MutationObserver - DOM 变化监听器

场景背景

在处理复杂的动态页面时，需要实时监控DOM的变化。早期的实现方法如DOMNodeInserted事件已不再推荐使用。

API 原理

MutationObserver可以高效地侦听文档或指定元素上的结构变化、属性变更和文本内容的修改，并且以优化后的批量方式通知观察者。

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log('属性变化:', mutation.type, '变化节点:', mutation.target);
  });
});

observer.observe(document.body, { subtree: true, attributes: true });

ResizeObserver - 元素大小监听器

场景背景

传统的window.resize事件无法精准地监控特定元素的尺寸变化。

API 原理

ResizeObserver可以用来精确和高效地监测任何DOM元素尺寸的变化，当元素发生变化时将触发回调函数。

const observer = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`元素大小: ${width} x ${height}`);
  });
});

observer.observe(document.querySelector('.box'));

PerformanceObserver - 性能监控器

场景背景

早期的性能监控主要依靠performance.timing等API，但是这些方法无法提供实时且直观的数据。

API 原理

PerformanceObserver允许开发者实时地监测浏览器的各种性能数据（如长任务、绘制时间以及资源加载情况），并根据需要进行优化调整。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log('性能数据:', entry);
  });
});

observer.observe({ type: 'longtask', buffered: true });

以上就是几个常用的浏览器原生 API 的介绍及应用示例，这些 API 能大大提高网页的加载效率和用户体验。希望本文对你有所帮助！

Page Visibility API — 页面可见性检测

用户行为分析：页面切换时的行为监控

你是否考虑过用户在使用你的网站或应用时的一些具体操作？例如：

• 当用户打开浏览器标签页后，又立刻切换到其他应用程序或者最小化窗口；
• 在这种情况下，网页上的动画效果是否会继续运行？
• 对于视频类的网站，在后台播放视频会消耗大量的系统资源。

以前的做法往往是通过监听 blur 和 focus 事件来判断页面的状态。但是这种方式不够精确，因为当用户仅是将浏览器最小化或者切换到其他标签页时，并不会触发这些事件。

Page Visibility API 的工作原理

Page Visibility API 提供了更为精准的页面可见性检测功能。

visibilityState 属性有两种可能的状态：
┌─────────────────────────────────────┐
│ visible - 页面完全可见（用户浏览）         │
│ hidden  - 页面被隐藏或者最小化          │
└─────────────────────────────────────┘

触发这些状态变化的场景包括但不限于：
- 切换到其他标签页：页面变为hidden；
- 最小化浏览器窗口：页面同样变为hidden；
- 用户关闭当前页面：hidden；
- 应用程序切换：隐藏页面。

具体使用方法

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面被隐藏了');
    pauseAnimations(); // 暂停动画效果
    stopPolling();     // 停止轮询操作
  } else {
    console.log('页面可见了');
    resumeAnimations(); // 恢复动画效果
    startPolling();     // 开始新的轮询任务
  }
});

console.log('当前状态:', document.visibilityState);

实际应用案例：用户行为统计

可以使用Page Visibility API来追踪用户的标签页切换行为，从而进行一些数据分析。

const metrics = {
  visibleTime: 0, // 页面可见的时间总和
  hiddenTime: 0,   // 页面隐藏时间的累加
  lastChangeTime: Date.now() // 上一次状态变化记录的时间戳
};

document.addEventListener('visibilitychange', () => {
  const now = Date.now();

  if (document.hidden) {
    metrics.visibleTime += now - metrics.lastChangeTime; 
    metrics.lastChangeTime = now;

      video.pause();
  } else {
    metrics.hiddenTime += now - metrics.lastChangeTime;
    metrics.lastChangeTime = now;

      video.play();
  }
});

window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('/analytics', JSON.stringify(metrics));
});

Battery API — 电池状态检测

用户体验优化：适应低电量模式

当用户的设备电量不足时，如何确保应用能够尽可能地节省电池？

例如：

• 在电量较低的情况下，是否有必要关闭动画效果来延长电池寿命？
• 当用户正在充电时，能否启用高性能模式以提高数据处理速度？
• 如何让用户知道他们的设备还能持续使用多久？

这些问题都可以通过 Battery API 来解决。

兼容性考量

以下是你需要考虑的浏览器兼容情况：

工作机制概述

Battery API 提供了获取电池状态信息的能力。

Battery API 的数据来源：
┌─────────────────────────────────────┐
│ 浏览器                              │
└────────────────────────────────────┘
       ↓
┌─────────────────────────────────────┐
│ 操作系统（如 Windows, macOS）        │
└────────────────────────────────────┘
       ↓
┌─────────────────────────────────────┐
│ 硬件设备（例如电池芯片）             │
└────────────────────────────────────┘

Battery API 通过以上路径获取到实际的电池信息，从而进行后续操作。

具体使用方法

navigator.getBattery().then(battery => {
    console.log('电量百分比:', battery.level);
    console.log('充电状态:', battery.charging ? '正在充电' : '未充电');
});

实际应用案例：优化用户体验

可以根据用户设备的电池剩余量来动态调整显示内容，例如在低电量情况下减少不必要的动画或者提醒用户节约用电。

navigator.getBattery().then(battery => {
  if (battery.level < 0.1) { // 当电量低于10%时提示用户节约电能
    document.getElementById('energy-conservation-tip').style.display = 'block';
  }
});

总结与建议

通过Page Visibility API和Battery API，开发者能够更加智能地管理资源利用，并且优化用户体验。

• 推荐大胆使用的API：IntersectionObserver、Page Visibility API、Clipboard API、ResizeObserver；
• 需谨慎考虑兼容性的API：Battery API 和 Geolocation API；
• 已废弃的方案：MutationEvent、document.execCommand（除了用于剪贴板操作）。

> 🔗 相关阅读：从静态页面到动态交互：DOM操作的核心API解析