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

Question

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

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

Answer 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*/
}