Question

在为移动设备调整网页时，我总是依赖于CSS媒体查询。

最近我不再只担心屏幕尺寸，而是担心许多移动设备的javascript引擎。一些常见的javascript效果依赖于窗口滚动或快速的DOM转换序列在慢速设备上工作非常糟糕。

有没有办法猜测设备性能，所以我可以启用/禁用在慢速设备上看起来不好的元素？

到目前为止，我只能想到不好的解决方案：

屏幕尺寸。狭窄的屏幕“可能”意味着设备缓慢
user agent information。我可以查看设备，浏览器或cpu，但由于需要考虑的设备数量，这似乎不是一个稳定的长期解决方案

更新：修正了我的问题，专注于一个问题。在评论中，触摸界面问题有一个很好的解决方案。

Answer 1

我能想到的唯一方法是在使用效果之前或同时在后台运行JS中的某种速度测试。这应该捕获由于处理器速度慢而速度慢的设备，反之亦然，捕获时间准确/快速的设备。但是，如果设备具有优化意味着它们使用不同的处理器来计算图形效果，那么这将无效。

var speedtest = function(){
  /// record when we start
  var target = new Date().getTime(), count = 0, slow = 0;
  /// trigger a set interval to keep a constant eye on things
  var iid = setInterval(function(){
    /// get where we actually are in time
    var actual = new Date().getTime();
    /// calculate where we expect time to be
    target += 100;
    /// 100 value here would need to be tested to find the best sensitivity
    if ( (actual - target) > 100 ) {
      /// make sure we aren't firing on a one off slow down, wait until this
      /// has happened a few times in a row. 5 could be too much / too little.
      if ( (++slow) > 5 ) {
        /// finally if we are slow, stop the interval
        clearInterval(iid);
        /// and disable our fancy resource-hogging things
        turnOffFancyAnimations();
      }
    }
    else if ( slow > 0 ){
      /// decrease slow each time we pass a speedtest
      slow--;
    }
    /// update target to take into account browsers not being exactly accurate
    target = actual;
    /// use interval of 100, any lower than this might be unreliable
  },100);
}

当然，通过运行它会影响设备的速度，所以它不是真正的最佳解决方案。作为一项规则，我倾向于在屏幕较小时禁用动画和其他多余的东西。

此方法的另一个缺点 - 我之前遇到过 - 是实现多标签环境setIntervals的某些浏览器在未查看选项卡时自动限制为特定速度。这意味着对于这种浏览器来说，标签会自动降级他们的体验 - 除非这种强加的速度限制可以通过某种方式被检测到。

Answer 2

对于这个问题，似乎没有特别好的解决方案（这是有道理的，因为这种类型的东西通常被认为是被隐藏的东西的类型）。我认为从UA检测开始，无论哪种方式都是最好的，以便处理那些已知属于这一类或另一类的平台。然后你有2个选项可以灵活地适应未知/不确定的平台：

渐进式增强：从精简测试开始，加载一个小型性能测试或测试以评估设备性能，然后加载文件以进行相应的增强。测试如已提供或在：Skip some code if the computer is slow
优雅降级：在较高级别的功能中包裹那些可能导致较差设备上的不利用户身份的功能，如果首次执行时间过长，则会替换它们。在这种情况下，我可能会将其添加到Function.prototype，然后允许将可接受的延迟参数链接到函数定义。在第一次调用存储之后，时间过去了，然后在第二次调用时，如果经过的时间超过了延迟，则将该函数替换为回退。如果经过的时间是可接受的，则通过交换标准函数来删除分析代码。我需要坐下来制定示例代码（也许是本周末）。这也可以通过其他参数进行调整，例如在交换之前多次分析。

第一个选项可能是更友好的选项，但第二个选项可能对现有代码的侵扰性较小。 Cookie或收集进一步的UA数据也有助于在检索到信息后继续进行分析。

Answer 3

你可以制作自己的迷你基准。做一些苛刻的计算并计算结果。如果它比您认为支持设备速度最慢的设备慢，那么您可以选择不太密集的网站版本。

如果用户遇到性能问题，您还可以创建一个易于访问的链接，以切换到更基本的网站。

关闭屏幕尺寸并不是一个好主意。大量现代手机都有小屏幕和快速处理器。

如何识别我网站中的慢速设备？

3 个答案: