在前端开发中,有时我们需要获取用户设备的硬件信息,比如 CPU 等,这有助于我们更好地优化应用性能,提供更适配的用户体验。下面介绍在 Chrome 浏览器中获取用户真实 CPU 和其他硬件信息的多种方式。
一、通过 navigator.hardwareConcurrency 属性获取逻辑 CPU 核心数
navigator.hardwareConcurrency 是一个很简单直接的属性,它返回当前设备的逻辑 CPU 核心数。
代码示例
const cpuCores = navigator.hardwareConcurrency;console.log('逻辑CPU核心数: ', cpuCores);
原理
这个属性是浏览器提供的 API,它直接返回操作系统报告给浏览器的逻辑 CPU 核心数量。逻辑 CPU 核心数包括了物理核心以及超线程技术模拟出来的逻辑核心。
二、利用 WebGL 2.0 获取 GPU 相关信息(间接反映 CPU 性能相关信息)
WebGL 2.0 是一种用于在网页上绘制交互式 3D 图形的 API,它可以提供一些关于 GPU 的信息,而 GPU 和 CPU 的性能在某些场景下是相互关联的。
代码示例
WebGL GPU Info
原理
WebGL 2.0 通过 getParameter 方法来获取 GPU 的供应商(VENDOR)和渲染器(RENDERER)信息。虽然这些信息直接描述的是 GPU,但在游戏等对图形性能要求较高的应用场景中,GPU 和 CPU 的性能协同工作,所以 GPU 的性能也可以从侧面反映出设备在处理这类任务时 CPU 的性能表现。
三、通过 Performance API 获取 CPU 相关性能指标
Performance API 可以提供关于页面性能的各种信息,其中一些指标可以间接反映 CPU 的性能。
代码示例
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
:
-
WebGL 2.0 获取 GPU 信息
:
-
Performance API
:
综上所述,在选择获取硬件信息的方法时,需要根据具体的业务需求和应用场景来决定。如果只是简单了解 CPU 核心数,navigator.hardwareConcurrency 就足够;如果是图形相关应用,WebGL 2.0 获取 GPU 信息有帮助;如果关注 CPU 计算性能,Performance API 模拟计算耗时的方式可以提供一定参考。
-
E
N
D -
如果您关注前端+AI 相关领域可以扫码进群交流