网站性能测试：如何最好地估计计算机性能？答案

【问题标题】：Website Performance Testing: How best to approximate computer performance?网站性能测试：如何最好地估计计算机性能？
【发布时间】：2012-07-15 21:25:01
【问题描述】：

我的网页中有一些浏览器密集型 CSS 和动画，我想确定用户是否拥有快速的 PC，以便我可以相应地缩放以提供最佳体验。

我正在使用http://detectmobilebrowser.com 的脚本来检测所有移动设备，并且我将包含子句/android|ipad|ipod|playbook|silk/i.test(a) 以包括所有平板设备。

然而，这并不能也不能真正解决实际的硬件问题。画出我正在寻找的东西并没有走得太远。

例如，iPhone 4S 的功能将比许多由移动用户代理检测器匹配的设备强大得多，这使它无法脱颖而出。有人可能会在 Pentium II 机器上运行 Google Chrome（不知何故）并想查看我的页面。（此人可能没有 iPhone 4S）

显然，要真正了解这一点，我必须进行一些实际的性能测试，并且与任何类型的应用程序的性能测试一样，只测试应用程序实际执行的任务类型的性能是有意义的施行。

即使考虑到这一点，我觉得在性能测试例程花费太长时间并且用户会变得不耐烦之前，很难获得任何合理准确的数字。所以这可能意味着继续它，除非我希望第一印象是完美的。嗯，这实际上恰好是这种情况。因此，我无法在“第一次运行后”测量性能并稍后调整参数。

所以我剩下的就是基本上尝试在初始页面加载时执行类似的任务，其方式取决于浏览器渲染和处理速度，同时不向用户呈现任何内容（以便向用户他们仍然认为页面正在加载），然后最好在一两秒钟内获得足够准确的数字，以便为实际页面设置参数，以便以不类似于幻灯片的令人愉悦的方式进行动画和呈现。

也许我可以在我的测试用例上放置一个整页的白色<div>，这样我就可以防止用户看到正在发生的事情，并希望浏览器不会因为避免做所有的工作而变得聪明。

有人做过吗？

我知道人们会说，“你可能不需要这样做”，或者“必须有更好的方法”或“减少影响的数量”。

我在页面上做的任何事情都是为了看起来不错。这就是它的全部意义所在。如果我不那么关心这个问题就不会存在。目标是让 javascript 能够确定足够的参数，以在功能强大的计算机上提供出色的体验，并在功能较弱的计算机上提供可及的体验。当有更多的电力可用时，应该加以利用。所以希望这可以解释为什么这些建议不是问题的有效答案。

【问题讨论】：

我认为您会希望通过使用小型构建块来更全面地了解他们的浏览器性能。基本上，使用一些用户不会注意到的小规模基准测试，但可以用来推断更大规模的硬件性能。
@AlexW 是的，我可以使用一些设计巧妙的测试来测试我将要使用的功能，从而尽可能快地估计性能。我确定new Date().getTime() 会得到锻炼。
白色 div 的问题在于它消除了测试中的一个瓶颈——图形硬件。你想测试两件事，图形性能和计算性能。后者是微不足道的，只需运行 10000 次有点复杂的计算并测量平均时间。图形性能更难。 peacekeeper.futuremark.com 在这方面做得很好。
正确的维和人员很棒，但需要的时间比我可用的时间多 200 倍。并且不希望得到 200 倍不准确的结果。好吧，从计算性能出发，推断图形性能就足够了。

标签： javascript performance html testing performance-testing

【解决方案1】：

我认为这是一个很好的问题，因为它将用户体验放在首位。

我想到了几个想法：

Microsoft 已发布了许多测试来展示 IE 9 和 10 的性能。其中许多测试侧重于图形性能，例如 this one，它似乎使用 this JavaScript file 来衡量性能。可能有一些您可以使用的代码/概念。
无论如何，媒体密集型页面可能需要几秒钟才能加载，因此如果您在加载其余内容的同时开始测试，您就有一点喘息的空间。例如，启动 AJAX/图像请求，运行测试，然后处理响应。
为了测试图形性能，使用加载图形作为性能测试怎么样？我通常不喜欢“加载”屏幕，但如果网站可能需要几秒钟才能加载，并且最终结果是更好的用户体验，那么这不是一个坏主意。
如果您在其上绘制一堆白色形状，白屏的想法可能会奏效（不确定是否有任何引擎足够聪明，可以将其优化掉，因为它是相同的颜色）。

最终，我宁愿选择更好的性能和更低的保真度，以及不太准确（但快速）的测试，而不是让用户等待太久。

【讨论】：

【解决方案2】：

我不会测量用户的 CPU 性能一次并确定要使用多少花哨的视觉效果，而是测量 CPU 密集型位每次执行所花费的时间量（使用new Date()），将其与预期的最小值和最大值（您必须确定）进行比较，并根据需要动态上下调整“效果级别”。

假设用户在后台启动了一个占用大量 CPU 时间的程序。如果您使用这个想法，您的页面将自动降低视觉效果以节省 CPU 周期。当后台程序结束时，花哨的效果会回来。我不知道您的用户是否会喜欢这种效果（但我相信他们会喜欢他们的浏览器在 CPU 过载时保持响应的事实）。

【讨论】：

这是处理它的好方法。我唯一的问题是我不能容忍在错误的“效果级别”下运行效果的短暂时间。但是，是的，当要求不那么严格时，它是一个很好、灵活的解决方案。
“我不能容忍即使是在错误的效果级别上运行很短的时间” - 如果是这样，您可以从最低（即最快）级别开始，然后重新调整every time 它运行任何效果。第一次运行时，页面刚刚加载（图像甚至可能仍在加载），因此如果您的花哨效果在几分之一秒后开始，用户不会注意到。另外，我应该说：制作最小值/最大值，用于将效果水平调整得足够宽以避免“狩猎”（如上山时的自动变速器）。

【解决方案3】：

这是一个糟糕的解决方案，但它在当时很有效：我曾经生成两个大约 100x100 的随机矩阵，将它们（小学生的方式）相乘 100 次并计时。在普通机器上用了不到 1 秒，在我能找到的最慢的机器上用了 2 秒多一点（EeePC 1000H）。之后我可以说“嗯，这个 CPU 每秒可以执行 X 次浮点运算”，这是非常不准确的，可能是错误的，但结果非常稳定并且标准偏差非常低，所以我想你可以称之为糟糕的衡量标准javascript 数学性能，它可以告诉您有关该计算机的 CPU 的一些信息。

您还可以检查它是否启用了 WebGL，它将排除所有比 Vista 更早的 Windows 操作系统。由于那些没有运行 Vista 或更高版本的硬件，因此它们的 PC 速度较慢。你可以用这个来检查：

function hasWebGL () {
  if (typeof window.WebGLRenderingContext !== 'undefined') {
    var canvas = document.createElement('canvas');
    var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') || canvas.getContext('webkit-3d') || canvas.getContext('moz-webgl');
    if(gl) {
      return(true);
    } else {
      return(false);
    }
  }
}

【讨论】：

数字运算技巧并不总是与图形布局性能相关。