前端监听CPU使用情况在前端的业务场景中，很多情况都需要根据用户的电脑使用情况，使用不同的策略，比如电脑卡顿的时候，需要

在前端的业务场景中，很多情况都需要根据用户的电脑使用情况，使用不同的策略，比如电脑卡顿的时候，需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到过使用计时器统计时差，比如100ms的计时器，偏差越大表示cpu的利用率越高，但是个人测试下来不是特别好用)。Chrome在125版本中推出了新的API，支持获取当前电脑的cpu使用情况。可以根据不同的状态针对业务做一些降级，用于改善用户体验。

效果

此处使用了一个工具，可以看到当cpu利用率处于不同阶段的时候，前端页面会收到不同的状态回调。

API

PressureObserver

新的类名字叫做PressureObserver。通过PressureObserver.observe方法来监听cpu状态的变化。每次cpu压力发生变化的时候会触发回调，返回当前cpu的状态(PressureRecord)。

PressureRecord

interface PressureRecord {
  source: "cpu";
  state: "nominal" | "fair" | "serious" | "critical";
  time: number;
}

source
- 表示压力变化的项，目前只支持cpu
state
- 表示目前的状态
  - nominal 表示很好
  - fair 表示压力略微升高，但是整体性能依然不错
  - serious 表示能耗大幅升高，应该考虑降低能耗
  - critical 表示能耗已经非常高，应该采取降级措施
time
- 压力变化的时间戳

代码

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>前端页面性能监控</title>
  </head>
  <body>
    <div id="div" style="white-space: pre-line;"></div>
    <script>
      let div = document.getElementById("div");

      function callback(records) {
        const lastRecord = records[records.length - 1];
        const date = new Date(lastRecord.time);
        div.innerHTML += `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}  state:` + lastRecord.state + '\r\n';
      }

      try {
        const observer = new PressureObserver(callback);
        observer.observe("cpu", { sampleInterval: 1000 });
      } catch (error) {
        div.innerHTML += `不支持PressureObserver方法\r\n`;
      }
    </script>
  </body>

注意事项

此方法需要在页面是active的状态下才会触发回调。

其他

如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以关注