html - SVG/SMIL 回流/重绘的性能影响？

Question

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

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

我不确定的是 SVG 的重绘，它们是否以与 CSS/HTML 相同的方式存在？毕竟 SMIL 动画已经创建了帧，所以像“重绘”这样的事情可能不会有任何不同，因为新帧无论如何都会被渲染。

任何对 SMIL 的内部工作原理有更深入了解的人可以为我阐明这些事情吗？

Answer 1

您的信息已过时。最近，UA 批量处理回流，因此您不再需要在 DOM 之外附加 div。

SVG 并没有真正的回流，因为它基本上都是绝对定位的，所以改变一个元素的位置只会影响该元素和任何后代。 SVG DOM 更改只会导致重绘。如果适当的数据在图形内存中，有时甚至不需要重新绘制，因为如今，即时转换通常几乎完全由图形硬件渲染器处理，无需重新绘制。 SMIL 动画也 Hook 到这个机制中。

如果 SVG 内容具有翻译属性，则它存储在单独的层中。在许多情况下，无需重新渲染即可更新图层，例如translation as graphics 系统可以只在需要去的地方绘制图层。

有更多关于 how this works in Firefox here 的文档但其他 UA 以类似的方式工作。