Performance 重用符号是否提高了SVG性能？

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

文档可以设置为多个单独的形状元素（

，

，等等），并定义它们自己的属性

可以将文档设置为几个

元素和许多单独的

实例，以适当地放置它们并调整它们的大小（） 我理解使用

/

的语义和代码维护原因，但我现在不关心这些，我严格地尝试优化渲染、转换和DOM更新性能。我可以看到

的工作原理类似于在Flash中重用精灵，节省内存，这通常是一个很好的实践。然而，如果浏览器供应商一直这么想，我会感到惊讶（这并不是该功能的真正意图）

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

• /
  性能是否有明确的模式
• 它对单个浏览器实现的特殊性有多大
• 重用
  与
  与嵌套
  之间是否存在差异

---

如果更改g或svg元素的内容，则UI可以查看绘制旧内容的区域以及将绘制更新的区域，并简单地重新绘制这两个区域，即使它们相同，也只重新绘制一次，例如更改形状的颜色

如果更新符号的内容，则必须重新绘制所有实例。通过计算要重画的新旧零件所在的每个实例，要做到这一点比较困难，因为这些区域可能会受到变换的影响，而只重画所有实例的所有零件更简单。有些浏览器可以执行前者，有些浏览器可以执行后者

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

---

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

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

在一般情况下，虽然它应该是快速的，但至少只要模板本身没有太大变化（因为如果这样做，那么每个实例也需要更新，并且由于CSS继承，每个实例都可能与其他实例不同）

和之间在功能级别上没有太大差异，它们都允许您定义坐标系（通过“viewBox”属性）。元素不允许您这样做。请注意，除非由a引用，否则元素是不可见的，而根据默认情况，和都是可见的。但是，在大多数情况下，建议将模板作为元素的子元素。

比较了使用

use

创建5000个SVG符号与直接创建SVG符号形状的渲染速度，请参阅。结果表明，使用

use

渲染

SVG

形状的速度几乎低于50%。他认为：

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

---

鉴于此，我假设使用SVG

symbol

s充其量只能与手动创建

symbols

s形状一样有效。

这是一个很好的观点。在我想象的场景中，符号不会在SVG的生命周期内改变或添加，只有实例-我编辑了问题以澄清这一相当重要的一点。嵌套的好技巧-我可以理解为什么使用DOM、CSS和，符号引用…还是这样吗？使用

有什么意义吗，比如说，对于

？如果您有非常复杂的图形并且经常使用它们，那么通过外部文件使用符号可能是有意义的，因为外部文件将只加载一次，并且可以很容易地缓存。例如，通常图标不会经常更改，但内容会经常更改，即外部SVG比直接包含在HTML中具有更好的缓存属性。