观察你的 Web 应用程序 - 快速总结

作为 Web 开发者，我们编写了大量代码来检测 Web 应用中的变更，并根据这些变更进行相应的操作。如今，Web 上有大量 API 可以“观察”你的 Web 应用的各种变更，并允许你根据这些变更执行相应的操作。

以下是简要总结：

1.通过事件监听器观察DOM

最经典的检测变化的方式是使用addEventListener。这可以用来监听原生事件以及自定义事件。

window.addEventListener('scroll', e => { ... });  // user scrolls the page.

el.addEventListener('focus', e => { ... });  // el is focused.

img.addEventListener('load', e => { ... });  // img is done loading.

el.addEventListener('custom-event', e => { ... });  // catch custom event fired on el.

2. 检查 DOM 树的修改

MutationObserver接口提供了监视 DOM 树所发生的变化的能力。

var target = document.querySelector('#div_id');

var observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        console.log(mutation.type);
    });
});

var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
} 
observer.observe(target, config);

3. 检查元素何时进入视图

Intersection Observer API提供了一种简单的方法来观察和注册回调，以便在页面上的元素进入视图时触发。

const images = document.querySelectorAll('.animate');

observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('in the view');
    } else {
      console.log('out of view');
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

使用此 API，我们可以在动画、延迟加载图像等出现在视图中时触发它们。

4. 检查 DOM 中的元素何时调整大小

ResizeObserver允许在元素大小发生变化时通知元素。

const myObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log('width', entry.contentRect.width);
    console.log('height', entry.contentRect.height);
  });
});

const el = document.querySelector('.some-element');
myObserver.observe(el);

对于每个条目，我们都会得到一个具有属性 -contentRect和的对象target。目标是 DOM 元素本身，contentRect 是一个具有以下属性的对象：width、height、x、y、top、bottom和left。right

5. 检查你的 Web 应用是否处于全屏模式

使用全屏 API可以实现这一点。

var el = document.getElementById("myvideo");
if (el.requestFullscreen) {
  el.requestFullscreen();
}

此 API 不仅可以检测全屏模式，还允许关闭和打开全屏模式。

6. 检查标签页是否处于焦点

document.addEventListener('visibilitychange', e => {
    if(document.hidden) {
        // .... do something
    } else {
        // .... dome something else
    }
});

即使这不是一个新的 API，而只是一项技术，我仍然会将其添加到列表中。一个用例是将用户的注意力重新吸引到被放弃的标签页上。

7. 检查设备方向变化

屏幕方向 API使这成为可能。


window.addEventListener('orientationchange', e => {
  console.log(screen.orientation.angle, screen.orientatio.type)
});

我们还可以检查当前方向是否与特定方向匹配。

const media = window.matchMedia('(orientation: portrait)');
media.addListener(mql => console.log(mql.matches));

8.检查网络状态和变化

网络信息 API提供有关用户网络连接的信息。利用这些信息可以有条件地加载图像、视频、字体和其他资源。


navigator.connection.addEventListener('change', e => {
  console.log(navigator.connection.effectiveType, navigator.connection.downlink);
});

除了上面提到的属性effectiveType和之外，它还downlink提供downlinkMax，，，。rttsaveDatatype

9.检查设备电池状态

这可以通过使用电池状态 API 来实现。


navigator.getBattery().then(battery => {
  console.log(
    battery.level * 100 + '%',
    battery.charging,
    battery.chargingTime,
    battery.dischargingTime
    ); 
});

10. 检查你的 Web 应用何时使用了弃用的 API 或触发了浏览器干预

报告API使之成为可能

const observer = new ReportingObserver((reports, observer) => {
  reports.map(report => {
    console.log(report);
    // ..... send report to analytics etc..
  });
}, {buffered: true});

observer.observe();

我相信，目前，该功能ReportingObserver仅在最新的 Chrome 中推出。

11. 检查你的 Web 应用的性能

PerformanceObserver接口用于观察性能测量事件，并在浏览器性能时间线记录新的性能条目时收到通知。

const observer = new window.PerformanceObserver(list => {
    list.getEntries().forEach(({name, startTime}) => {
        console.log({name, startTime});
    });
});
observer.observe({
    entryTypes: [{'paint', 'resource', 'mark', 'measure'}]
});

Web 上竟然有如此众多优秀的 API 供我们使用，真是令人惊叹。利用这些 API，我们可以创建性能更佳、用户体验更佳的 Web 应用。

注意：在使用现代 API 之前，请务必检查浏览器支持情况。

有用的资源

鏂囩珷鏉ユ簮锛�https://dev.to/ananyaneogi/observing-your-web-app---a-quick-round-up-3ji0