探索前端新特性：Compute Pressure API

前言

前几天，review 同事代码的时候发现了一个新的 JS API PressureObserver。

通过一番搜索，发现这个 API 是 Compute Pressure API 的一部分。

它的作用是可以观察 CPU 的变化。

这有什么用呢？

举个例子：如果你在一个具有视频会议功能的网站上跟别人开会，会议里的人都开着摄像头。那么你的设备的 CPU 压力就会很大，因为它需要处理很多视频流。如果网站不能根据 CPU 的压力动态调整远端视频流的分辨率，那么这个网站就会出现使用卡顿，甚至出现网站崩溃的现象。

如果有了这个 API，那么这个问题不就迎刃而解了吗？

细心的读者应该已经发现了，我给出的这个 API 的链接是 W3C 的，而不是 MDN 的。

是因为这个 API 还没有被 W3C 标准化，目前还处于草案阶段，所以 MDN 上也没有相关的文档。

那么有必要去了解这个 API 吗？毕竟它还没有被标准化。

我认为是有必要的。因为它的出现，意味着我们可以给用户带来更好的体验。

我们先来看一下这个 API 的 demo。

Compute Pressure API demo

前置条件

• 使用 Chrome 浏览器
• Chrome 浏览器版本 >= 115

如果满足前置条件，那么demo API Status 的值是 enabled。

首先我们点击 Start 按钮，此时 Pressure 的状态是 nominal。

nominal 表示 CPU 的压力正常

增加 1 个 worker 并开启模拟，此时 Pressure 的状态是 Fair。

fair 表示 CPU 的压力正常，但是有一些任务正在运行

增加到 6 个 worker 的时候，Pressure 的状态开始变为 Serious。

serious 表示 CPU 的压力严重，但是仍然可以正常工作

增加到 8 个 worker 的时候，Pressure 的状态变为 Critical。

critical 表示 CPU 的压力非常严重，无法正常工作

关于 Pressure 各个状态的严重程度，可以用下面这张表格来表示：

Pressure Status	Severity
nominal	⚪
fair	🟢
serious	🟡
critical	🔴

Use-Cases

体验了 demo 之后，我们知道了 Compute Pressure API 可以实时反映 CPU 的压力。

那么我们可以在什么场景下使用这个 API 呢？

相信大家对 WebRTC 不会陌生，WebRTC 是 Web Real-Time Communication 的缩写。Real-Time 的意思是实时，而 Compute Pressure API 的能力也是实时反映 CPU 的压力。

所以，这个 API 在 WebRTC 应用的场景可以用来：

• 动态调整视频流的质量和数量
• 选择性的开启或关闭虚拟背景，滤镜，降噪等功能
• 等等

如何使用 Compute Pressure API

首先满足前置条件。

然后注册 Compute Pressure 的 origin trial。

依次填入表单中的信息，然后点击 Register 按钮。

注意这里的 Web Origin 需要填写 https 或 http。

注册完成后，你会得到一个 token。

然后在你的网站中添加以下 meta 标签：

<meta http-equiv="origin-trial" content="copy from your token" />

这样你就可以在你的网站中使用 Compute Pressure API 了。为了避免 token 过期，你可以添加以下防御性代码：

if ("PressureObserver" in globalThis) {
  // Use PressureObserver interface
}

细心的读者应该发现我这里用了 globalThis，因为 PressureObserver 可以在 worker 使用。

实际上，PressureObserver 支持在以下 contexts 使用：

• DedicatedWorker
• SharedWorker
• Window

我们试着创建一个 PressureObserver 实例：

const observer = new PressureObserver(
  (changes) => {
    /* ... */
  },
  {
    sampleRate: 0.5,
  }
);

当然你也可以不指定 sampleRate，默认值是 1。

sampleRate 的单位是 Hz，表示每秒采样的次数。

举个例子如果 sampleRate 是 0.5，那么就是每 2 秒采样一次。

这里有一个坑点，如果你的 sampleRate 设置为 2 但系统最多只能提供 1 Hz 的采样频率，那么最终 PressureObserver 的采样频率就是 1 Hz。

我们之前在 demo 中看到那个 emoji 表情随着 worker 数量的增加而发生变化，前提是 PressureObserver 的 observer 了 cpu：

observer.observe("cpu");

实际上，PressureObserver 还可以观察 thermals（热气流）。

但是现在 Chrome 只支持 cpu，可以用 PressureObserver 的静态方法 supportedSources 判断：

console.log(PressureObserver.supportedSources());

取消 observer 也很简单：

observer.unobserve("cpu");

同样，如果你也可以使用：

observer.disconnect();

取消所有的 observer，但现在 Chrome 还不支持 thermals，这个方法的便利性还没有体现出来。

实际上我测试下来 PressureObserver 的 callback 函数的参数虽然是一个数组，但是数组的长度始终是 1。

const observer = new PressureObserver((changes) => {
  // changes.length 始终为 1
});

虽然数据结构有点奇怪，但这并不妨碍我们使用这个 API。

const observer = new PressureObserver((changes) => {
  switch (changes[0].state) {
    case "nominal": {
    }
    case "fair": {
    }
    case "serious": {
    }
    case "critical": {
    }
    default: {
    }
  }
});

我们之前介绍了 PressureObserver 的 unobserver 与 disconnect 方法，那么细心的你可能注意到了，如果调用这些方法的时候 cpu 的压力发生了变化怎么办？

PressureObserver 的 takeRecords 方法考虑到了这个问题：

在 disconnect 前通过调用这个方法获取到 cpu 压力的变化。

总结

PressureObserver API 属于 Compute Pressure API 的一部分，它可以实时反映 CPU 的压力，未来还可以反映热气流的压力。

开发者可以通过监听 CPU 的变化动态调整视频流的质量和数量，选择性的开启或关闭虚拟背景等行为提升用户体验。

PressureObserver 的 API 使用起来非常简单，还考虑到了一些边界情况，比如在调用 unobserver 或 disconnect 方法的时候 CPU 的压力发生了变化，这时候可以通过 takeRecords 方法获取到压力的变化。

虽然现在 PressureObserver 只能通过 origin trial 开启，但是我相信它很快就会被标准化，让我们一起期待吧！