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

Question

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

1. 该文件可以被设置为许多单独的形状要素(<circle>,<line>等)具有定义其自己的属性.
2. 该文档可以设置为几个<symbol>元素和许多单独的<use>实例,将它们放置并适当调整大小(W3规范).

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

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

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

Answer 1

Rohit Kalkur使用use直接创建SVG符号形状来比较创建5000个SVG符号的渲染速度,请参见此处.事实证明,SVG使用渲染形状的速度use几乎要慢50%.他的理由是:

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

考虑到这一点,我认为使用SVG symbol最多只需要手动创建symbolss形状.

Answer 2

我建议您不要将 <use> 元素嵌套得很深。众所周知，这会导致大多数浏览器变慢，请参阅此处和此处。

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

<svg> 和 <symbol> 在功能层面上没有太大区别，它们都允许您定义坐标系（通过 'viewBox' 属性）。<g> 元素不允许您这样做。请注意，除非被 <use> 引用，否则 <symbol> 元素是不可见的，而 <svg> 和 <g> 在默认情况下都是可见的。然而，在大多数情况下，建议让模板成为 <defs> 元素的子元素。

Answer 3

如果您更改 ag 或 svg 元素的内容，则 UI 可以查看绘制旧内容的区域以及将绘制更新的区域，并简单地重绘这两个区域，甚至如果它们相同（例如更改），则仅重绘一次形状的颜色。

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

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

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