javascript - Javascript 中的“切换”CSS 会减慢渲染速度吗？

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

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

此功能首先将所有元素设置为“隐藏”，然后遵循一系列规则从其中的许多元素中再次删除该类。这在同一个函数中立即发生，没有延迟。

很多时候，函数完成后任何元素都没有实际差异，但它仍然暂时将元素的类设置为“隐藏”，然后再次将其删除。

类的这种“切换”会导致渲染器重新计算实际上没有改变的东西吗？

编辑：澄清：我希望由于Javascript是单线程的，渲染器只会在函数完成时响应，而不是在函数中间。如果这是真的，那么从渲染器的角度来看，对象的类并没有改变，即使它们实际上是临时更新的。

标签： javascripthtmlcssperformancerendering

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

动画的低成本属性是：

下图很好地概述了哪些属性在浏览器的资源上易于使用，哪些属性成本更高。图表越高，需要的资源就越多。

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