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

How can I recognize slow devices in my website?

本文关键字：网站 我的 何识别 识别      更新时间：2023-09-26

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

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

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

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

  1. 屏幕大小。窄屏幕"可能"意味着设备速度慢
  2. 用户代理信息。我可以看看设备、浏览器或cpu，但由于需要考虑的设备数量，这似乎不是一个稳定的长期解决方案

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

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

  1. 渐进增强：从精简测试开始，加载一个或多个小型性能测试来衡量设备性能，然后加载相应增强的文件。测试，如已提供或在：如果计算机是慢速跳过一些代码

  2. 优雅降级：将那些可能在速度较慢的设备上造成不利用户体验的功能封装在一个更高阶的函数中，如果它们在第一次执行时花费太长时间，就会替换它们。在这种情况下，我可能会将其添加到Function.prototype中，然后允许将一个可接受的延迟参数链接到函数定义中。在第一次调用之后存储经过的时间，然后在第二次调用时，如果经过的时间超过了延迟，则使用回退交换函数。如果经过的时间是可以接受的，那么通过交换标准函数来删除分析代码。我需要坐下来制定示例代码（也许这个周末）。这也可以通过额外的参数进行调整，例如在交换之前多次配置文件。

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

我能想到的唯一方法是在使用效果之前或使用效果时在后台用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限制在一定的速度。这意味着，对于这种浏览器来说，切换将自动降低他们的体验——除非这种强加的速度限制可以通过某种方式被检测到。

您可以制作自己的迷你基准测试。做一些高要求的计算，并对结果计时。如果它比您认为支持速度最慢的设备慢，那么您可以使用强度较低的网站版本。

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

缩小屏幕尺寸不是个好主意。许多现代手机都有带快速处理器的小屏幕。

相关文章：