重用符号是否可以改善SVG性能？

Question

假设一个相对现代的，支持SVG的桌面浏览器和一个由数百个类似的简单节点组成的SVG：

1. 可以将文档设置为多个单独的形状元素（<circle>，<line>等），并定义自己的属性。
2. 该文档可以设置为几个<symbol>元素和许多单独的<use>个实例，这些实例可以放置它们并对其进行适当调整（W3 spec）。

我理解使用<symbols> / <use>的语义和代码维护原因，但我现在并不关心这些，我正在严格尝试优化渲染，转换和DOM更新性能。我可以看到<symbol>的工作方式类似于在Flash中重用sprite，节省内存并且通常是一种很好的做法。但是，如果浏览器供应商一直在考虑（并且这不是该功能的 intent ），我会感到惊讶。

编辑：我不希望在SVG的生命周期中更改或添加基本符号，只是实例位置，大小等

• <symbol> / <use>表现是否有明确的模式？
• 单个浏览器的实现有多特殊？
• 重用<symbol>与<g>与嵌套<svg>之间是否存在差异？

Answer 1

Rohit Kalkur使用use比较创建5000个SVG符号的渲染速度，直接创建SVG符号的形状，请参阅here。事实证明，使用SVG渲染use形状几乎 50％更慢。他的理由是：

  

use元素从SVG文档中获取节点，并且   在非暴露的DOM中复制它们

鉴于此，我假设使用SVG symbol的效果最好与手动创建symbols形状一样。

Answer 2

我建议你不要嵌套＆lt; use＆gt;元素深刻。众所周知，这会导致大多数浏览器速度下降，请参阅here和here。

在一般情况下，尽管它应该很快，但至少只要模板本身没有太大变化（因为如果你这样做，那么每个实例也需要更新，并且每个实例都可以与由于CSS继承而休息。）

介于＆lt; svg＆gt;之间和＆lt; symbol＆gt;在功能级别上没有那么大的差异，它们都允许您定义坐标系（通过'viewBox'属性）。 A＆lt; g＆gt;元素不会让你这样做。请注意＆lt; symbol＆gt;除非由＆lt; use＆gt;引用，否则元素是不可见的，而＆lt; svg＆gt;和＆lt; g＆gt;默认情况下都可见。但是，在大多数情况下，建议将模板设为＆lt; defs＆gt;的子项。元件。

Answer 3

如果您更改了ag或s​​vg元素的内容，那么UI可以查看绘制旧内容的区域以及更新将被绘制到的区域，并简单地重绘这两个区域，如果它们是的话，甚至只重绘一次同样的改变形状的颜色。

如果更新符号的内容，则必须重绘所有实例。通过计算要重新绘制旧部件和新部件的每个实例来做到这一点更难，因为区域可能会受到变换的影响，并且更简单，只需重新绘制所有实例的所有部分。有些浏览器可以做前者，有些浏览器做后者。

在任何一种情况下，UI必须至少跟踪符号中的更改并将这些更改传播到所有实例。这可能会产生一些开销。

当然，如果你只是移动单个符号实例并且内容是静态的，那么就不需要跟踪，并且性能可能类似。