使用 javascript 检测设备 CPU/GPU 性能？

Posted 2023-02-27

【中文标题】使用 javascript 检测设备 CPU/GPU 性能？

【英文标题】：Using javascript to detect device CPU/GPU performance?

【发布时间】：2012-12-09 17:53:22

【问题描述】：

（问题不针对three.js，但我会以它为例）

我最近一直在使用 three.js 开发一个 Web 应用程序界面，并在 WebGL 和 Canvas 渲染器（用于桌面浏览器）之间编写了一些不错的回退。

但现在问题变成了如何正确检测设备能力，问题有两个方面：

浏览器功能（静态功能，如 webgl/canvas）：这在网络社区中通过简单的功能检测在很大程度上得到了解决。 设备能力：这是最难的部分，如果无法直接访问设备的硬件信息，我们需要一些方法来判断我们是否应该回退到对硬件要求较低的代码。

一个值得注意的例子：Firefox 移动/Opera 移动声称支持 WebGL，但存在错误或受设备硬件限制。

目前我想出的一些解决方法：

使用通用功能作为性能指标 - 例如，触摸设备的硬件功能通常不太强大。缺点：它不是面向未来的。 将已知有问题的浏览器/设备列入黑名单 - UA 嗅探将不可避免，而且难以维护。 性能测试 - 那么问题来了，除了运行代码和测量帧率之外，还有更好的选择吗？

或者也许不必这么难，还有其他建议吗？

【参考方案1】：

我最终在一个项目中使用了性能测量方法，我们希望利用高规格 CPU/GPU 桌面以及低速设备（例如桌子和电话）上提供的画布功能。

基本上，我们从最低场景复杂度开始，如果渲染循环花费的时间少于 33 毫秒，我们会增加复杂度（如果渲染循环在稍后时间开始花费太长时间，我们也会降低复杂度）。

我想在您的情况下，您可能需要运行快速画布和 webgl 性能测试，然后选择一个。在花了一些时间研究这个问题之后，我没有遇到一些可以更好地解决这个问题的棘手的非显而易见的技术。

【讨论】：

喜欢您使用的解决方案。感谢分享。

+1，动态检测和调整是唯一的出路。特别是如果您想支持任何使用电池的设备，并且可能会在飞行途中切换到低性能模式以节省电池。如果你做一次静态检测，你会错过这样的环境变化。

【参考方案2】：

您可以使用http://webglstats.com/ 获得 WebGL 硬件支持和功能检测。

【讨论】：

虽然统计数据很有趣，但我看不出如何将其应用于我网站的个人用户（以启用适当的后备，无需设备/浏览器黑名单）。同样从代码来看，检测似乎是在 iframe 中完成的，我对方法的选择持怀疑态度。

确实如此。这是非常有趣的信息，但它只是特征检测，您可以自己为每个用户做一些事情。它不会告诉你性能，除非你想在功能实现和性能之间画出一些非常不可靠的相关性。

不再。网站已死。

【参考方案3】：

如果您使用three.js，您可以使用detector.js 来确定是否启用了webgl。远离 canvasrenderer 也会有所帮助。使用 webglrenderer 或 softwarerender。因为它们允许更多的顶点。软件渲染相当新，需要一些工作，但可以使用。