写过性能优化的人都踩过这个坑——适配不同设备性能只能靠盲猜，高端机跑不满、低端机直接卡死，今天 Chrome 用两个 API 把这件事彻底原生化了

写过性能优化的人都踩过这个坑——适配不同设备性能只能靠盲猜，高端机跑不满、低端机直接卡死，今天 Chrome 用两个 API 把这件事彻底原生化了。

视频会议应用最典型：接入一个用户，你要不要给他开高清画质？开高了低配手机直接崩溃，开低了高配用户骂你画质差。以前全靠经验值猜，猜错了就是事故。现在浏览器自己告诉你了。

两个 API，各管一件事

CPU Performance API（Chrome 152+）回答静态问题：「这台设备有多强？」

调 navigator.cpuPerformance，返回一个整数 1 到 4，代表设备性能层级。1 是最低，4 是最高，0 代表无法分类。

const tier = navigator.cpuPerformance ?? 0;
// tier: 1(low) / 2(medium) / 3(high) / 4(ultra) / 0(unknown)

这个值从哪来的？Chrome 在出厂时就测量好了，用户也可以在设置 > Performance > Speed 里手动改，企业还能通过 policy 强制锁定。简单说：不用你自己跑基准测试，浏览器给你现成的。

Compute Pressure API（Chrome 125+）回答动态问题：「CPU 现在是不是饱和了？」

用 PressureObserver 订阅 CPU 压力变化，压力状态分成四级：

• nominal：一切正常，设备在轻松跑
• fair：轻微压力，风扇开始响，电量消耗加快，但还能接活
• serious：持续高压，系统可能在降频，再加活就要出事
• critical：温度或功耗已经超标，这是最后一次让你调整的机会，再不降负系统自己会强制节流

const observer = new PressureObserver(records => {
  const state = records.at(-1).state;
  switch (state) {
    case 'critical': reduceAll(); break;
    case 'serious':   lowerQuality(); break;
    case 'fair':
    case 'nominal':  fullQuality(); break;
  }
});
await observer.observe('cpu', { sampleInterval: 1000 });

这两个 API 合起来，才是完整的答案。CPU Performance 决定初始档位，Compute Pressure 决定运行时要不要升降级。

怎么用？视频会议举例

假设你做了一个视频会议产品，用户进来先测设备性能定画质档位，然后实时监控压力状态动态调整：

// 第一步：用 CPU Performance API 选初始画质预设
const tier = navigator.cpuPerformance ?? 2;
const resolution = tier >= 3 ? '1080p' : tier >= 2 ? '720p' : '480p';
const maxFeeds = tier >= 3 ? 8 : tier >= 2 ? 4 : 2;

// 第二步：用 Compute Pressure API 实时升降级
const observer = new PressureObserver(records => {
  const state = records.at(-1).state;
  if (state === 'critical') {
    setResolution('360p');
    setMaxFeeds(1);
    showToast('设备压力大，已自动降低画质');
  } else if (state === 'serious') {
    setMaxFeeds(Math.max(1, maxFeeds - 2));
  } else if (state === 'nominal' && currentResolution !== resolution) {
    restoreQuality();
  }
});
await observer.observe('cpu', { sampleInterval: 2000 });

这个组合解决了以前靠 benchmark 跑分做设备检测的所有痛点：跑分慢（要跑几秒才有结果）、结果不准（可以通过sleep绕）、隐私问题（越精细的硬件信息越容易被指纹追踪）。现在浏览器作为可信中间层，给你一个粗粒度的答案，隐私和体验兼顾。

除了视频会议还能干什么

Web 游戏：CPU 压力高了自动降阴影、降粒子数量、保帧率；压力下来再恢复。

数据可视化 Dashboard：压力高时停掉非关键图表的动画，只保留核心数据更新。

在线代码编辑器：监测到 serious/critical 时暂停语法检查、延迟 lint，把主线程让给用户输入。

流式 AI 响应展示：设备紧张时减少流式 token 的渲染频率，保证首 token 不卡。

隐私和争议

需要说一下：这个 API 不是没有争议。Mozilla 提过它可能成为指纹追踪向量——不过相比跑分和 hardwareConcurrency，4 个粗粒度层级能提取的熵值相当有限。而且 Chrome 允许用户手动改，enterprise policy 也能强制锁定，对隐私敏感的场景有出口。

Safari 暂时没有支持，原因是这个。Firefox 也没表态。如果你用，需要做 feature detection 渐进增强：

if ('cpuPerformance' in navigator) {
  const tier = navigator.cpuPerformance;
  // ...
}

if ('PressureObserver' in window) {
  // 支持 Compute Pressure
} else {
  // fallback: 固定质量或降级方案
}

下一步

把这两个 API 加进你的性能工具箱，下次做多设备适配方案时，不用再自己跑 benchmark 了：

// 一行拿到静态层级
const tier = navigator.cpuPerformance ?? 2;

// 一行订阅动态压力（别忘了清理）
const observer = new PressureObserver(cb);
await observer.observe('cpu', { sampleInterval: 1000 });
// 页面离开时 observer.disconnect()

从盲猜到有据可依，设备适配这件事，终于可以交给浏览器了。