如何使用JS获取系统内存、CPU/GPU、电量等信息

创作时间:

作者:

@小白创作中心

如何使用JS获取系统内存、CPU/GPU、电量等信息

引用

来源

https://www.zhangxinxu.com/wordpress/2024/12/js-get-memory-cpu-gpu-battery/

随着Web技术的不断发展，现代浏览器已经能够获取设备的硬件信息，包括内存大小、CPU核数、GPU信息以及电池状态等。这些信息对于开发高性能的Web应用具有重要价值。本文将详细介绍如何使用JavaScript获取这些硬件信息，并探讨其在实际开发中的应用场景。

一、JS获取内存大小

获取系统内存大小非常简单，只需使用以下一行代码：

navigator.deviceMemory

例如，在Chrome浏览器控制台中运行上述代码，可以得到设备的内存大小。需要注意的是，deviceMemory属性目前仅在Chrome浏览器中支持。

二、JavaScript 获取 CPU 信息

虽然Web无法获取CPU的具体参数信息，但可以获取CPU的核数。这同样是通过navigator对象实现的，属性名为hardwareConcurrency，表示可以并行运行的硬件数量。

代码示例如下：

navigator.hardwareConcurrency

运行结果将显示设备的CPU核数。例如，运行结果可能显示设备是12核的CPU。

此外，对于Mac设备，可以通过navigator.platform获取平台信息，例如返回值为'MacIntel'。

hardwareConcurrency属性的兼容性较好，所有标准浏览器都支持该属性。

三、GPU信息获取

获取GPU信息同样简单，只需使用以下代码：

navigator.gpu

navigator.gpu返回的是一个GPU对象，该对象与WebGPU API密切相关。这个对象包含一个属性和两个方法：

属性：wgslLanguageFeatures
方法：requestAdapter() 和 getPreferredCanvasFormat()

其中，navigator.gpu.wgslLanguageFeatures.size返回当前Web环境支持的WGSL语言特征数量。例如，某些较新的GPU可能返回4，而较老的GPU则可能返回较少的数值。

这个API主要检测浏览器是否支持WebGPU，以及是否可以调用适配器以使用WebGL等功能。目前，最新的Safari和Firefox浏览器已经支持该API。

四、设备电量识别

获取设备电量状态可以使用getBattery()方法。以下是使用示例：

let batteryIsCharging = false;
navigator.getBattery().then((battery) => {
  // 当前电量水平是...范围0-1
  console.log(battery.level);
  // 是否在充电
  batteryIsCharging = battery.charging;
  // 充电状态变化的时候
  battery.addEventListener("chargingchange", () => {
    batteryIsCharging = battery.charging;
  });
});

通过上述代码，可以获取当前设备的电量状态以及是否处于充电状态。对于PC电脑，如果接通电源且没有电池，电量范围始终为1。而对于移动笔记本，则会显示实际的电量状态。

这个API在用户体验方面具有重要应用价值，例如可以据此显示自定义的电池进度条、充电动画，或者在低电量时提醒用户关闭不必要的动画以节省电力。

然而，遗憾的是，目前只有Chrome浏览器支持该API，其他主流浏览器尚未提供支持。因此，尽管这是一个很有用的API，但在实际开发中只能作为玩具功能使用。