2

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

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

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

任何对 SMIL 内部运作有更深入了解的人可以为我澄清这些事情吗？

4

1 回答 1

3

您的信息已过时。如今，UA 批量重排，因此您不再需要将 div 附加到 DOM 之外。

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

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

这里有更多关于它如何在 Firefox 中工作的文档，但其他 UA 以类似的方式工作。

于 2014-07-08T07:46:10.503 回答