如何识别我网站中的慢速设备？ [英] How can I recognize slow devices in my website?

问题描述

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

When adapting a web page for mobile devices I always rely on css media queries.

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

Recently I no longer worry only about the screen size, but also the javascript engine of many mobile devices. Some common javascript effects that rely on window scrolls or a quick sequence of DOM transformations work really bad on slow devices.

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

Is there any way to guess the device performance so I can enable/disable elements that look bad on slow devices?

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

So far I can only think of bad solutions:

1. 屏幕大小。窄屏可能意味着设备缓慢


2. 用户代理信息。我可以查看设备，浏览器或cpu，但由于需要考虑的设备数量，这似乎不是一个稳定的长期解决方案

1. screen size. narrow screen "might" mean slow device
2. user agent information. I could look at the device, browser or cpu, but that does not seem a stable long term solution because of the amount of devices to consider

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

UPDATE: Fixed my question to focus on one problem. In the comments there is a good solution for the touch interface problem.

推荐答案

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

It certainly seems as though there is no particularly good solution for this issue (which would make sense since this type of stuff is normally supposed to be the type of stuff that's hidden away). I think either way your best starting with UA detection to take care of those platforms that are known to fall into one category or another. Then you'd have 2 options to flexibly adapt to unknown/uncertain platforms:

1. 渐进式增强 ：从精简测试开始，加载一个小的性能测试或测试以测量设备性能，然后加载文件以进行适当的增强。测试如已提供或在：如果计算机速度慢，请跳过一些代码

1. Progressive Enhancement: Start with a stripped down test and load a small performance test or tests to gauge the device performance and then load the files for the appropriate enhancements. Test such as already provided or at: Skip some code if the computer is slow

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

Graceful Degradation: Wrap those features that are candidates for causing unfavorable UX on slower devices in a higher order function that replaces them if they take too long on first execution. In this case I'd probably add it to Function.prototype and then allow an acceptable delay argument to be chained on to the function definition. After the first invocation store the time lapsed, and then on the second invocation if the time lapsed is over the delay swap out the function with a fallback. If the time elapsed is acceptable then remove the profiling code by swapping in the standard function. I'd need to sit down and work out sample code (maybe this weekend). This could also be adjusted by additional arguments such as to profile multiple times before swapping.

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

The first option would likely be the friendlier option, but the 2nd may be less intrusive to existing code. Cookies or collecting further UA data would also help from continuing to profile after information is retrieved.

这篇关于如何识别我网站中的慢速设备？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！