0

0

如何用BOM获取用户的设备内存信息?

煙雲

煙雲

发布时间:2025-07-12 16:23:01

|

215人浏览过

|

来源于php中文网

原创

navigator.devicememory无法获取精确内存信息,只能提供近似值。1. navigator.devicememory是当前唯一标准属性,但返回的是2的幂次方近似值,如4、8等,并非真实gb数;2. 浏览器出于隐私保护限制精确值,防止用户指纹识别;3. 可通过该值粗略判断设备性能,指导资源加载策略,如高配设备加载高清图,低配设备优化资源;4. 其他api如performance.memory仅反映js堆内存使用情况,无法获取整机内存;5. 若需更详细硬件信息,需借助原生应用或特定环境工具

如何用BOM获取用户的设备内存信息?

直接通过BOM获取用户设备的精确内存信息,坦白说,在现代浏览器环境中,是件挺困难的事,或者说,几乎不可能获取到那种你想象中的、GB级别的精确数字。我们能接触到的主要是navigator.deviceMemory这个属性,它给出的往往是一个近似值,而且出于隐私和安全考虑,它不是一个精确的、实时的内存报告。

如何用BOM获取用户的设备内存信息?

解决方案

如果你想获取设备内存的近似值,navigator.deviceMemory是目前唯一一个由BOM提供的标准化属性。这玩意儿挺有意思的,它不是个精确的数字,比如你电脑是16GB内存,它可能给你返回8或者4。这是出于隐私保护的考虑,避免网站通过精确的硬件信息来做用户指纹识别。所以,指望它能告诉你“哦,你这台机器有15.9GB可用内存”,那是不可能的。

以下是如何使用它的简单示例:

如何用BOM获取用户的设备内存信息?
if ('deviceMemory' in navigator) {
    const memoryGB = navigator.deviceMemory;
    console.log(`当前设备的内存(近似值):${memoryGB} GB`);

    // 你可以根据这个值来做一些初步的判断
    if (memoryGB >= 8) {
        console.log('设备内存充裕,可以加载高分辨率资源。');
    } else if (memoryGB >= 4) {
        console.log('设备内存中等,考虑优化资源。');
    } else {
        console.log('设备内存较低,建议加载轻量级资源。');
    }
} else {
    console.log('抱歉,您的浏览器不支持获取设备内存信息。');
    // 对于不支持的浏览器,你可以提供一个默认的、相对保守的体验
}

请注意,这个属性返回的是一个近似值,通常是2的幂次方(如0.25, 0.5, 1, 2, 4, 8等),代表了浏览器对设备内存的粗略估计。

为什么navigator.deviceMemory返回的是近似值而非精确值?

说起这个,就不得不提浏览器的设计哲学了。它们现在对用户隐私的重视程度简直是前所未有的高。deviceMemory这个属性,它从一开始就不是为了让你去做什么硬件检测工具的。它的核心目的是给开发者一个“模糊的提示”,让你能根据用户的设备大致能力来调整网页的加载策略或者资源消耗。

如何用BOM获取用户的设备内存信息?

如果浏览器直接暴露精确的内存数值,结合其他一些硬件或软件指纹信息(比如Canvas指纹、字体列表、屏幕分辨率、CPU核心数等),理论上可以大大增加对用户的唯一识别度,这显然是隐私保护的大忌。浏览器厂商,尤其是Chrome、Firefox这些主流的,在设计API时都会非常谨慎地权衡功能性和隐私性。所以,这种模糊化的处理,是一种非常有效的隐私保护策略。它既满足了开发者对设备能力感知的部分需求,又避免了潜在的用户追踪风险。

除了navigator.deviceMemory,还有其他方法获取更详细的内存信息吗?

嗯,这个问题问得好,很多人都想知道。直接点说,通过前端代码在浏览器里去窥探用户设备的详细内存信息,基本是条死路。浏览器本身就是一个高度沙盒化的环境,它把你的代码和用户的操作系统以及硬件隔离开来,这是为了安全,也是为了防止恶意网站瞎搞。

你可能会想到一些其他的Performance API,比如performance.memory,但那获取的是当前网页JavaScript堆栈内存使用情况,也就是你的JS代码在浏览器进程里占用了多少内存,这和整个设备的物理内存完全是两码事。它能告诉你你的应用是不是有内存泄漏,但绝不能告诉你用户电脑有16GB还是8GB内存。

易优cms汽车车辆租赁源码1.7.2
易优cms汽车车辆租赁源码1.7.2

由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面,且获取方式简便,不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户,所以如何设计一个租车网站,以便在同行中脱颖而出就重要了,易优cms针对租车行业市场需求、目标客户、盈利模式等,进行策划、设计、制作,建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页

下载

所以,如果你真的需要更详细的设备信息,那通常就超出了前端浏览器环境的能力范围了。你可能需要考虑在用户同意的情况下,通过桌面应用、移动原生应用,或者在特定企业内部网络环境(且有相应权限)的客户端工具来获取。在纯Web环境下,我们只能在浏览器给出的有限信息中打转。

如何根据navigator.deviceMemory优化网页性能?

既然我们拿不到精确数字,那这个近似值到底能干嘛?我觉得它的价值主要在于提供一个“粗粒度的判断”。你可以把它看作是浏览器给你的一张“能力卡片”,上面写着“这台机器大概是高配、中配还是低配”。基于这个判断,我们就能做一些差异化的体验了。

  1. 资源加载策略:

    • 如果deviceMemory值较高(比如>= 8),你可以大胆地加载高分辨率图片、复杂的CSS动画、或者使用一些比较耗费内存的JavaScript库(比如大型的3D渲染库)。
    • 如果值较低(比如),就应该优先加载低分辨率的图片、简化动画效果、避免不必要的资源加载,甚至可以考虑使用更轻量级的JS框架。
    • 举个例子,一个电商网站,在内存充裕的设备上可以默认展示高清大图和产品3D模型,而在内存受限的设备上则只加载缩略图和平面视图。
  2. 数据处理与渲染:

    • 对于大量数据的列表,内存充裕的设备可以尝试一次性加载更多数据进行渲染,或者使用更复杂的虚拟滚动技术。
    • 内存受限的设备则应严格控制每次加载的数据量,采用简单的分页加载,或者减少DOM元素的数量。
  3. 动画与特效:

    • 复杂的粒子效果、Web Workers处理的大型计算、或者使用WebGL渲染的场景,都对内存有较高要求。你可以根据deviceMemory的值来决定是否启用这些效果。
  4. 结合其他性能指标:

    • 单独依赖deviceMemory并不总是完美的。它最好能和其他一些性能指标结合起来使用,比如navigator.hardwareConcurrency(CPU核心数)、navigator.connection(网络连接类型和速度),以及User-Agent Client Hints(虽然它不直接提供内存信息,但可以获取设备类型等)。综合判断,能让你对用户设备的能力有更全面的认识,从而做出更精准的优化决策。

记住,这是一种渐进增强或优雅降级的思路,目标是让你的网站在不同设备上都能提供尽可能好的用户体验,而不是一刀切。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

552

2023.09.20

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

72

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 20.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号