专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
目录
相关文章推荐
51好读  ›  专栏  ›  奇舞精选

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

奇舞精选  · 公众号  ·  · 2025-01-20 18:00

正文

本文作者系360奇舞团前端开发工程师


在前端开发中,有时我们需要获取用户设备的硬件信息,比如 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 的计算能力。

四、方法对比

  1. navigator.hardwareConcurrency

  • 优点 :获取方式极其简单,直接返回逻辑 CPU 核心数,几乎没有性能开销。

  • 缺点 :只能获取到逻辑 CPU 核心数,信息单一,无法反映 CPU 的性能强弱等更详细信息。

  1. WebGL 2.0 获取 GPU 信息

  • 优点 :可以获取到 GPU 的相关信息,对于一些图形密集型应用,能从侧面了解设备的硬件性能情况,尤其是与 CPU 协同工作的性能情况。

  • 缺点 :需要浏览器支持 WebGL 2.0,部分老旧浏览器可能不支持。而且获取的是 GPU 信息,与 CPU 信息并非直接关联,只是间接反映。

  1. Performance API

  • 优点 :通过模拟计算任务耗时,可以在一定程度上评估 CPU 的计算能力,对于优化应用中计算密集型任务有参考价值。

  • 缺点 :模拟计算任务的耗时受多种因素影响,如当前浏览器的其他任务负载等,不能完全精准地反映 CPU 的真实性能。而且需要编写额外的模拟计算代码,相对复杂。

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

- E N D -

如果您关注前端+AI 相关领域可以扫码进群交流








请到「今天看啥」查看全文