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

Sys*_*ank 6 javascript user-experience touch responsive-design web

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

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

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

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

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

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

Mat*_*ple 3

当然,对于这个问题似乎没有特别好的解决方案(这是有道理的,因为这种类型的东西通常应该是隐藏的东西类型)。我认为无论哪种方式,你最好从 UA 检测开始,以处理那些已知属于某一类别的平台。那么您将有两种选择来灵活适应未知/不确定的平台:

  1. 渐进增强:从精简测试开始,加载一个或多个小型性能测试来衡量设备性能,然后加载文件以进行适当的增强。测试例如已经提供的或在:如果计算机速度慢则跳过一些代码

  2. 优雅降级:将那些可能在较慢的设备上导致不利用户体验的功能包装在一个高阶函数中,如果它们在第一次执行时花费太长时间,则该函数将替换它们。在这种情况下,我可能会将其添加到函数定义Function.prototype中,然后允许将可接受的延迟参数链接到函数定义上。第一次调用后存储经过的时间,然后在第二次调用时,如果经过的时间超过延迟,则通过回退换出该函数。如果经过的时间可以接受,则通过交换标准函数来删除分析代码。我需要坐下来制定示例代码(也许这个周末)。这也可以通过其他参数进行调整,例如在交换之前进行多次分析。

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