7

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

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

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

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

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

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

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

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

有没有人这样做过？

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

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

4

3 回答 3

3

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

想到了几个想法：

  • Microsoft 已经发布了许多测试来展示 IE 9 和 10 的性能。其中许多测试侧重于图形性能，例如这个，它似乎使用这个 JavaScript 文件来测量性能。可能有一些您可以使用的代码/概念。

  • 无论如何，媒体密集型页面可能需要几秒钟才能加载，因此如果您在加载其余内容的同时开始测试，您就有一点喘息的空间。例如，启动 AJAX/图像请求，运行测试，然后处理响应。

  • 要测试图形性能，使用加载图形作为性能测试怎么样？我通常不喜欢“加载”屏幕，但如果网站可能需要几秒钟来加载，最终结果是更好的用户体验，那么这不是一个坏主意。

  • 如果您在其上绘制一堆白色形状，则白屏想法可能会起作用（不确定是否有任何引擎足够聪明以优化它，因为它是相同的颜色）。

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

于 2012-07-25T03:52:29.280 回答
2

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

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

于 2012-07-25T04:51:46.763 回答
1

这是一个糟糕的解决方案，但它在当时很有效：我曾经生成两个大约 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);
    }
  }
}
于 2012-07-25T03:34:07.987 回答