使用 JavaScript 检测慢速硬件/慢速浏览器答案

【问题标题】：Detecting slow hardware/slow browsers with JavaScript使用 JavaScript 检测慢速硬件/慢速浏览器
【发布时间】：2012-10-19 05:40:05
【问题描述】：

我的网站有几个 CSS 动画和过渡，所有这些在某些浏览器（谢天谢地，不是大多数）和某些较旧的硬件中呈现非常非常缓慢。我试图避免 UA 嗅探；有什么方法可以使用 JavaScript 或 JS 库检测浏览器或硬件配置，然后为我知道对这些功能没有很好支持的浏览器加载非动画版本？

为了澄清任何歧义，我不是在寻找像 Modernizr 这样的东西。

【问题讨论】：

我建议您自己编写一些时序检测，以满足您的特定需求。 “慢”过于笼统，尤其是当某些设备和硬件具有特定功能的加速时。
我宁愿为用户提供一个禁用此类动画的选项，也不愿费力地检测可能不符合用户喜好的“慢速硬件”。
@FabricioMatte：虽然给用户更多的灵活性是令人钦佩的，但如果我的盒子真的很慢并且不是关键项目（即银行/账单支付）我会不用费心寻找禁用它的方法，而是当场杀死标签。
获取最常见的慢速设备的用户代理字符串列表，并在页面加载时检查该字符串。例如：enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings（仅适用于手机/平板电脑，因为慢速计算机没有唯一的用户代理标识符）

【解决方案1】：

这绝对不足以检测慢速系统，但可以最大限度地减少对此类系统用户的影响：

Use CSS transitions 并使用 jQuery 触发它们（通过根据需要切换类），将元素动画卸载到渲染引擎，这样页面的功能响应能力至少不会受到影响。

使用正确 CSS 属性。例如，不要为top:10px;left:10px; 属性设置动画，而是使用CSS transform transform: translateX(10px) translateY(10px)，这样会更有效。

通过向目标元素添加 transform: translate3d(0,0,0); 或类似解决方法来触发硬件 (GPU) 加速。

如果您完全依赖动画，或者出于某种原因需要在没有 CSS 的情况下触发后备功能（隐藏/显示/重新定位元素），you could try a Modernizr workaround:

if(!Modernizr.csstransitions) {
  /*fallback logic*/
}

【讨论】：

我确实使用 CSS 过渡和变换，并且熟悉该技术。您能否详细说明一下使用 jQuery 触发转换和变换？
@Verandaguy：我的意思是 jQuery 可用于调整“最终”属性值（正在被动画化），而不是迭代调整“中间”属性值。也许这在a thorough example 中有更好的解释？