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

我的网站有几个CSS动画和转换,所有这些都在某些浏览器(很幸运的是,不是大多数)以及某些较旧的硬件上呈现非常慢.我试图避免UA嗅闻;有没有办法使用 JavaScript或JS库来检测浏览器或硬件配置,然后加载浏览器的非动画版本,我知道这些功能对这些功能没有很好的支持？

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

解决方法

这不足以检测到缓慢的系统,但会最小化对这些系统的用户的影响：

Use CSS transitions,并通过jQuery触发它们(通过根据需要切换类),将元素动画卸载到渲染引擎,使页面的功能响应性至少不会受到影响.

使用正确的CSS属性.例如,而不是动画顶部：10px; left：10px;属性,使用CSS transform变换：translateX(10px)translateY(10px),这将更有效率.

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

如果您绝对附加到动画,或者由于某种原因需要触发后退功能(隐藏/显示/重新定位元素),而不需要CSS,you could try a Modernizr workaround：

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

原文地址：https://www.jb51.cc/css/216404.html