是否对性能问题的所有元素应用CSS转换？

Question

我认为将一些CSS过渡添加到我的网站是一个不错的选择，以便悬停影响淡入/淡出。我想一个非常简单的方法就是使用下面的代码：

a, div, input, button{

   -webkit-transition: background .5s;
    transition: background .5s;
}

这会使任何背景变化淡入/淡出。当然，我的网站上的每个a，div，输入和按钮都不会在悬停时进行背景更改，因此您无法在任何地方看到转换。但它让我想知道是否如此广泛地应用转换会导致任何浏览器性能问题，尤其是在手机上。

那你觉得怎么样？可以像我上面那样实施吗？或者我应该只将转换应用于适用的特定元素/类？

Answer 1

与普通网站相比，在您的网站上添加转换/动画会给内存和/或CPU增加一些重载，但实际上我从来没有发现CSS转换/动画作为性能瓶颈。所以你可以随意使用它们。

但是你应该只在需要的地方添加它们。不必要地添加它们可能会导致用户体验不良。

  

CSS动画，CSS过渡和   Javascript的requestAnimationFrame（）在当前选项卡时暂停   推到了后台。

如果您有兴趣，请read this article from MDN

Answer 2

转换某些属性（例如left和margin会导致浏览器每帧重新计算样式。这可能是少数几种可以为性能增加显着重量的情况之一。

除此之外，使用尽可能多的安全是相当安全的，但正如@SUJEET JAISWAL所说，只要确保它也不会因为过度使用而造成糟糕的用户体验。