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

Question

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

为了消除任何歧义,我不是在寻找像Modernizr这样的东西.

Answer 1

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

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

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

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

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

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