javascript - Javascript 中的 "toggling"CSS 会减慢渲染速度吗？

Question

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

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

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

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

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

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

Answer 1

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

动画的低成本属性是:

• 职位
• 规模
• 轮换
• 不透明度

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

来源:High Performance Animations

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