重用符号会提高 SVG 性能吗？

Question

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

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

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

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

• <symbol>/<use> 的性能有什么明确的模式吗？
• 对于单个浏览器实现而言，它有多么特殊？
• 重用<symbol>与<g>与嵌套<svg>之间有区别吗？

Answer 1

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

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

鉴于此，我假设使用 SVG symbols 最多与手动创建 symbolss 形状一样高效。

Answer 2

我建议你不要深度嵌套 元素。众所周知，这会导致大多数浏览器速度变慢，请参阅 here 和 here。

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

在

Answer 3

如果您更改 ag 或 svg 元素的内容，那么 UI 可以查看绘制旧内容的区域以及将绘制更新的区域，然后简单地重绘这两个区域，即使它们是相同，例如改变形状的颜色。

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

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

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