Question

我的网页上有一些浏览器密集型的CSS和动画，我想确定用户是否有快速的PC，因此我可以相应地扩展内容以提供最佳体验。

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

然而，这不能也无法真正解决实际硬件问题。绘制一张我正在寻找的图片并不是很遥远。

例如，iPhone 4S将比移动用户代理检测器匹配的许多设备具有更强大的功能，而这使得它无法将自己与众不同。有人可能会在奔腾II机器上运行谷歌浏览器（不知何故），并希望查看我的页面。（这个人可能没有iPhone 4S）

显然要真正了解这一点我必须做一些实际的性能测试，就像使用任何类型的应用程序进行性能测试一样，仅测试应用程序实际类型的性能是有意义的施行。

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

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

也许我可以在我的测试用例中放置一个整页白色<div>，以便我可以阻止用户看到正在发生的事情，并希望浏览器不会通过避免完成所有工作而变得聪明。

有没有人这样做过？

我知道人们会说，“你可能不需要这样做”，或者“必须有更好的方式”或“减少效果”。

我在网页上执行任何操作的原因都是看起来不错。这就是它的全部要点。如果我不关心这个问题就不会存在。目标是让javascript能够确定足够的参数，以便在功能强大的计算机上提供出色的体验，并在功能较弱的计算机上提供可通过的体验。当有更多电力时，应该利用它。所以希望这可以解释为什么这些建议不是问题的有效答案。

Answer 1

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

想到了几个想法：

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

最终，我会更倾向于更好的性能和更低的保真度，以及不太准确（但快速）的测试而不是让用户等待太长时间。

Answer 2

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

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

Answer 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);
    }
  }
}

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

3 个答案: