在 Chrome 浏览器里获取用户真实硬件信息的方法

在前端开发中，有时我们需要获取用户设备的硬件信息，比如 CPU 等，这有助于我们更好地优化应用性能，提供更适配的用户体验。下面介绍在 Chrome 浏览器中获取用户真实 CPU 和其他硬件信息的多种方式。

一、通过 navigator.hardwareConcurrency 属性获取逻辑 CPU 核心数

navigator.hardwareConcurrency 是一个很简单直接的属性，它返回当前设备的逻辑 CPU 核心数。

代码示例

arduino 复制代码

const cpuCores = navigator.hardwareConcurrency;console.log('逻辑CPU核心数: ', cpuCores);

原理

这个属性是浏览器提供的 API，它直接返回操作系统报告给浏览器的逻辑 CPU 核心数量。逻辑 CPU 核心数包括了物理核心以及超线程技术模拟出来的逻辑核心。

二、利用 WebGL 2.0 获取 GPU 相关信息（间接反映 CPU 性能相关信息）

WebGL 2.0 是一种用于在网页上绘制交互式 3D 图形的 API，它可以提供一些关于 GPU 的信息，而 GPU 和 CPU 的性能在某些场景下是相互关联的。

代码示例

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL GPU Info</title>
</head>
<body>
  <canvas id="glCanvas"></canvas>
  <script>
  const canvas = document.getElementById('glCanvas'); 
  const gl = canvas.getContext('webgl2');
  if (gl) {
    const vendor = gl.getParameter(gl.VENDOR);
    const renderer = gl.getParameter(gl.RENDERER);
    console.log('GPU厂商: ', vendor);
    console.log('GPU渲染器: ', renderer);
   } else {
    console.log('浏览器不支持WebGL 2.0'); 
  }
  </script>
</body>
</html>

原理

WebGL 2.0 通过 getParameter 方法来获取 GPU 的供应商（VENDOR）和渲染器（RENDERER）信息。虽然这些信息直接描述的是 GPU，但在游戏等对图形性能要求较高的应用场景中，GPU 和 CPU 的性能协同工作，所以 GPU 的性能也可以从侧面反映出设备在处理这类任务时 CPU 的性能表现。

三、通过 Performance API 获取 CPU 相关性能指标

Performance API 可以提供关于页面性能的各种信息，其中一些指标可以间接反映 CPU 的性能。

代码示例

ini 复制代码

window.addEventListener('load', function () {
  const performanceMarks = performance.getEntriesByType('mark');  
  const measureName = 'cpu - measure';  
  performance.mark('start - measure');  
  // 模拟一段复杂计算来测试CPU性能  
  let sum = 0;  
  for (let i = 0; i < 100000000; i++) {
    sum += i;  
  }  
  performance.mark('end - measure');  
  performance.measure(measureName,'start - measure', 'end - measure');  
  const measure = performance.getEntriesByName(measureName)[0];  
  console.log('模拟计算耗时: ', measure.duration,'毫秒'); 
  performance.clearMarks('start - measure');  
  performance.clearMarks('end - measure');
  performance.clearMeasures(measureName);});

原理

通过 performance.mark 标记开始和结束时间点，然后使用 performance.measure 来计算这两个时间点之间的时间差。通过模拟一段复杂的计算任务，这段计算任务的耗时可以在一定程度上反映 CPU 的计算能力。

四、方法对比

navigator.hardwareConcurrency：

优点：获取方式极其简单，直接返回逻辑 CPU 核心数，几乎没有性能开销。
缺点：只能获取到逻辑 CPU 核心数，信息单一，无法反映 CPU 的性能强弱等更详细信息。

WebGL 2.0 获取 GPU 信息：

优点：可以获取到 GPU 的相关信息，对于一些图形密集型应用，能从侧面了解设备的硬件性能情况，尤其是与 CPU 协同工作的性能情况。
缺点：需要浏览器支持 WebGL 2.0，部分老旧浏览器可能不支持。而且获取的是 GPU 信息，与 CPU 信息并非直接关联，只是间接反映。

Performance API：

优点：通过模拟计算任务耗时，可以在一定程度上评估 CPU 的计算能力，对于优化应用中计算密集型任务有参考价值。
缺点：模拟计算任务的耗时受多种因素影响，如当前浏览器的其他任务负载等，不能完全精准地反映 CPU 的真实性能。而且需要编写额外的模拟计算代码，相对复杂。

综上所述，在选择获取硬件信息的方法时，需要根据具体的业务需求和应用场景来决定。如果只是简单了解 CPU 核心数，navigator.hardwareConcurrency 就足够；如果是图形相关应用，WebGL 2.0 获取 GPU 信息有帮助；如果关注 CPU 计算性能，Performance API 模拟计算耗时的方式可以提供一定参考。