SVG/SMIL再流/再油漆对性能的影响？

Question

在过去，我在javascript中做了很多工作，包括一些DOM操作。从这里我了解到，在某些情况下，重新绘制/重新绘制可能是一个很大的性能问题，并且通常应该限制在最低限度。例如，当添加一组div时，您应该一次性添加(将它们附加到DOM之外的div，然后附加它)，而不是一个接一个地附加它们。对于重绘也是如此，可以通过更改元素的CSS属性来触发重绘。虽然我必须承认，我从来没有研究过那么多的重新油漆，所以我可能是错误的最后一部分。

这是否也适用于SVG (考虑到它使用的是一种DOM，这似乎是合理的)？对于不同的SVG元素，有什么不同吗？例如，动画元素不会创建回流，因为它不是一个新的SVG元素，而是更像一个属性。

我不确定的是SVG的重绘，它们是否与CSS/HTML一样存在？毕竟SMIL动画已经创建了框架，所以像“重绘”这样的东西可能不会有任何区别，因为新的框架无论如何都会呈现出来。

有谁对SMIL的内在运作有更深入的了解，谁能为我澄清这些事情？

Answer 1

你的信息已经过时了。UAs成批处理这些天，这样您就不再需要在DOM之外附加div了。

SVG没有真正的折叠式，因为它基本上都是绝对定位的，因此更改一个元素的位置只会对该元素和任何后代产生影响。SVG更改只会导致重新绘制。有时，如果适当的数据位于图形内存中，甚至不需要重新绘制，因为实例转换和转换转换通常几乎完全由图形硬件呈现程序处理，而不需要重新绘制。SMIL动画也与此机制挂钩。

如果SVG内容具有转换属性，则将其存储在单独的层中。在许多情况下，图层可以被更新而不需要重命名，例如翻译，因为图形系统只需要画出它们需要到达的图层。

有更多关于这里的Firefox是如何工作的？的文档，但是其他的UAs也以类似的方式工作。