Javascript中的“切换” CSS是否会减慢渲染速度？

Question

我正在调查网站速度很慢的一种可能原因：

我有一个Javascript函数，该函数经常被调用，并为许多对象确定哪些对象应该是可见的，哪些对象是不可见的。它是通过添加/删除CSS类“隐藏”来实现的。

此功能的工作方式是先将所有元素设置为“隐藏”，然后遵循一堆规则再次从许多元素中删除该类。在同一功能中，此操作立即发生，没有延迟。

函数完成后，任何元素通常并没有实际的区别，但仍会暂时将元素的类设置为“隐藏”，然后再次将其删除。

这种对类的“切换”是否会导致渲染器重新计算实际上未更改的内容？

edit：澄清一下：我希望由于Javascript是单线程的，因此渲染器仅在完成函数时才响应，而不是在函数中间。如果是这样，那么从渲染器的角度来看，这些对象的类别不会更改，即使它们实际上是临时更新的。

Answer 1

这取决于hidden类的动画效果。有些属性的动画制作成本很低，而另一些属性的成本却很高，因为浏览器需要执行更多渲染。

要制作动画的低成本属性是：

• 位置
• 规模
• 旋转
• 不透明

下面的图像很好地概述了哪些属性在浏览器的资源上很容易获得，哪些成本更高。图表越高，需要的资源越多。

来源：High Performance Animations

要衡量函数的性能，可以使用performance.now()来衡量函数需要花费的时间。然后，进行一些调整，看看它是否运行得更快。