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

这篇文章发布于 2024年12月23日,星期一,00:31,归类于 JS API。 阅读 458 次, 今日 266 次 2 条评论

 

封面图 JS系统 圣诞

目前,浏览器是有能力获取系统的一些信息的,包括内存大小,CPU/GPU、电量等。

一、JS获取内存大小

很简单,下面一行代码即可:

navigator.deviceMemory

例如在我的Chrome浏览器控制台的输出结果就是:

设备内存大小获取

deviceMemory的兼容性如下截图所示,目前仅Chrome浏览器支持。

deviceMemory设备内存获取兼容性

二、JavaScript get cpu信息

目前Web没法获取CPU具体的参数信息,但是可以获取CPU的核数。

同样是navigator对象,不过属性值看不到CPU三个字母的影子,名为hardwareConcurrency,表示可以并行运行的硬件数量。

代码示意:

navigator.hardwareConcurrency

运行结果示意:

CPU核数示意

没想到,我的破电脑CPU是12核的,应该与去年换主板有关,不过没看出性能有多少提升。

不过Mac下貌似可以看出芯片的品牌,例如我的Mac办公电脑运行navigator.platform返回的是'MacIntel'

hardwareConcurrency值的兼容性比deviceMemory好多了,参见下图,可以看到所有标准浏览器都是支持的:

硬件并行数量兼容性

三、GPU也是可以获取的

也是一行语法:

navigator.gpu

不过navigator.gpu返回的并不是具体的数值,而是GPU对象,这个对象和WebGPU API关联密切。

支持一个属性和两个方法,属性是wgslLanguageFeatures,方法为requestAdapter()getPreferredCanvasFormat()

navigator.gpu.wgslLanguageFeatures.size返回的是当前Web环境支持的WGSL语言特征数量,例如我的电脑windows电脑返回的是4,Mac笔记本也是4,有些GPU比较老,数量就不会是4.

不过这个API……怎么说呢,跟想象的有些不一样,检测的其实是浏览器是否支持WebGPU,以及是否可以调用适配器,以使用WebGL等功能。

我看来下兼容性,嘿,最新的Safari和Firefox都已经支持了,还挺巧的。

GPU属性兼容性

四、设备的电量识别

电量获取使用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其实和用户体验还是走得蛮近的,兼容性的话,我看看,是这样的:

getBattery兼容性

有些遗憾,仅仅Chrome浏览器支持,怪不得社区很少见到有对此API的讨论。

而且从Chrome开始支持的时间来看,短时间内,看不到Safari浏览器支持的迹象。

这么好的API,目前也只能当做玩具使用了。

五、其他一些硬件与设备的识别

navigator对象还提供了很多其他的硬件识别,例如蓝牙,虚拟键盘,USB,外置摄像头,是否掉线(navigator.onLine)等。

篇幅原因,我就不一一展示了,有兴趣可以访问对应的文档。

只要遇到类似的场景,知道Web有这样的能力就可以了。

ok,就这样吧,轻轻松松,又水了一篇文章,佛佛佛。

佛佛佛

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. Leon说道:

    刚刚还在研究,张老师就发文了!

    我做的是在浏览器中运行大语言模型(WEBRWKV),正在研究根据显存大小自动加载最合适的模型。但是似乎没找到能获取显存大小的接口,目前的方案是用GPU型号模糊查表(https://www.kaggle.com/datasets/alanjo/graphics-card-full-specs),想问问张老师有更好的方案吗?