有没有办法了解访问网页的“平台”硬件资源？

Question

我希望能够从网页中找到浏览器的硬件资源，或者至少粗略估计一下。

即使您通过像csstransforms3d这样的工具在浏览器中检测到现代技术(如csstransitions、requestAnimationFrame)的存在，您也无法确定是激活一些性能消耗选项(如花哨的3D动画)还是避免使用它。

我问这个问题是因为我有(很多)经验，浏览器是现代的(最新的Chrome或火狐支持所有酷技术)，但是OS的CPU、GPU和可用内存都是灾难性的(32位Windows与集成GPU)，因此，完全基于检测到的浏览器上限的决策是不好的。

Answer 1

一般来说，关于用户系统的可用信息(对网页而言)非常有限。

我记得关于在web平台中添加这样一个API的讨论 (navigator.hardwareConcurrency -可用内核的数量)，其中反对该功能的人解释了反对它的原因，特别是：

• 应用程序可用内核的数量取决于其他工作负载，而不仅仅取决于可用的硬件。它不是固定不变的，用户可能不愿意让你的应用程序使用所有可用的硬件资源(或你选择的固定部分)；
• 帮助“指纹”客户端。
• 过于关注今天的细节。网络被设计成可以在许多设备上工作，其中一些设备现在甚至不存在。

这些参数也适用于用于查询特定硬件资源的其他API。您具体想要检查的是，用户的系统是否有能力运行一个“漂亮的3D动画”？

作为一个用户，如果您的站点/应用程序的核心功能没有必要的话，我希望您不使用额外的资源(如花哨的3D动画)。令人难过的是，我不得不每隔几年买一台新的笔记本电脑，这样我才能继续我目前的工作流程，而不会因为缺乏HW资源而运行得非常慢。

话虽如此，你可以这样做：

• 为站点的“完整”版本有问题的用户提供一个备用链接。
  • 如果这对您来说足够重要，您可以首先运行短期基准测试来检查性能，如果您怀疑系统缺少资源，则可以返回到不太需要资源的站点。

​

• 您可以通过检查操作系统、屏幕大小等来瞄准特定的高端平台。
  • 本文在移动平台上提到了这种方法：http://blog.scottlogic.com/2014/12/12/html5-android-optimisation.html

​

• WebGL通过webgl.getParameter()提供了一些有关呈现器的信息。例如，请参阅此页面：http://analyticalgraphicsinc.github.io/webglreport/

Answer 2

虽然Nickolay给出了一个非常好的、广泛的解释，但我想给出一个非常简单但可能有效的解决方案--您可以试着测量页面加载和决定是否使用那些需要资源的特性所用的时间(Gmail做了类似的事情--如果加载时间太长，就会出现切换到“基本HTML”版本的建议)。

这个想法是，对于速度慢的电脑，不管内容如何，加载任何页面的速度都应该比在现代计算机上慢得多。获取加载页面应该很简单所需的时间，但是有几点需要注意：

• 您需要进行一些实验，以确定在哪里设置“太慢”阈值。
• 您需要记住，缓慢的连接会导致页面加载的速度变慢，但是这可能会在非常少的情况下产生不同的效果(使用DOM就绪而不是load事件也可以在这里有所帮助)。
• 此外，由于缓存，用户第一次加载站点的速度可能要慢得多。一个简单的解决方案是将结果保存在cookie或本地存储中，并且只考虑用户第一次访问时的加载时间。
• 不要忘了使用 allow ，不管你使用的是什么检测机制，也不管它有多精确，用户可以在常规的、资源匮乏的版本和速度更快、“更丑”的版本之间做出选择--有些人更喜欢更好看的效果，即使这意味着网站的速度会变慢，而其他的价值速度和速度会更快。