css - 使用 JavaScript 检测慢速硬件/慢速浏览器

Question

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

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

Answer 1

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

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

使用正确的CSS 属性。例如，不要使用动画top:10px;left:10px;属性，而是使用更有效的CSS 变换。 transform: translateX(10px) translateY(10px)

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

如果您完全依赖动画，或者出于某种原因需要在没有 CSS 的情况下触发后备功能（隐藏/显示/重新定位元素），您可以尝试 Modernizr 解决方法：

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