如何在Web应用中检测CPU/GPU性能？寻求通用稳定轻量方案

一、window.WebAssembly && window.Worker检测的实际价值 #

这种方式仅能判断浏览器是否支持对应API，无法直接反映设备的实际CPU/GPU性能。现在主流浏览器基本都支持这两个特性，但低端设备即使支持，运行复杂任务时仍会出现性能瓶颈。所以它只能作为「设备是否具备现代Web特性」的基础判断，不能用来做性能分级。

二、无需WebGL的轻量性能检测方案 #

1. 基于CSS动画的GPU性能检测 #

你现有的背景位移动画可以改造成性能检测工具，核心是通过requestAnimationFrame跟踪实际渲染帧率，直接反映GPU的渲染能力：

let frameCount = 0;
let startTime = performance.now();
let isTracking = true;

function countFrame() {
  if (!isTracking) return;
  frameCount++;
  requestAnimationFrame(countFrame);
}

// 启动检测，持续2秒
countFrame();
setTimeout(() => {
  isTracking = false;
  const duration = (performance.now() - startTime) / 1000;
  const actualFps = Math.round(frameCount / duration);

  // 根据帧率划分性能等级
  if (actualFps >= 55) {
    console.log("高性能设备");
  } else if (actualFps >= 30) {
    console.log("中等性能设备");
  } else {
    console.log("低性能设备");
  }
}, 2000);

背景位移动画属于GPU加速任务，实际帧率能直接体现GPU处理渲染任务的效率，比单纯的API检测更贴近真实性能。

2. 轻量CPU计算检测 #

用简单的CPU密集型任务（比如递归计算斐波那契数列），通过耗时判断CPU性能：

function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

const start = performance.now();
fib(35); // 选择合适的计算量，避免耗时过久
const end = performance.now();
const cost = end - start;

if (cost < 100) {
  console.log("CPU性能优秀");
} else if (cost < 300) {
  console.log("CPU性能中等");
} else {
  console.log("CPU性能较弱");
}

这种纯CPU计算任务不会占用GPU资源，能单独评估CPU的处理能力。

3. 组合检测（更精准） #

同时运行上述两种检测，结合帧率和计算耗时综合判断设备整体性能——Web应用的流畅度往往依赖CPU和GPU的协同工作，组合检测的结果更贴近实际使用场景。

三、检测注意事项 #

• 要在页面加载完成后再启动检测，避免和页面初始化任务冲突导致结果偏差。
• 可以多次检测取平均值，减少偶然因素的影响。
• 控制检测任务的强度，不要因为检测拖慢页面加载或影响用户体验。

内容的提问来源于stack exchange，提问作者Simon Ferndriger