svg:svg元素与svg:g元素的性能比较

Question

我正在重写一个图表，并考虑从将后代元素包装在 <g> 元素中切换到使用 <svg>。我所遇到的问题是，对于我尝试做的每件事情来说，<svg> 元素更容易实现。我关心的是是否会有任何性能影响。 <g> 看起来非常轻量级，而 <svg> 由于不太轻量级而具有更多功能。

那么实际上是否会产生性能损失？

- QueueHammer

---

你需要在你的特定情况下进行尝试。 - Lars Kotthoff

你基于什么来做出轻量级/不太轻量级的断言？ - Robert Longson

@RobertLongson 猜测一下...以及适用于后代元素的属性和规则。一个例子是 <svg> 将创建一个新的视口。 - QueueHammer

比猜测更好的是测试 :-) - Robert Longson

Answer 1

到目前为止，我从jsperf获得的结果是，追加svg比追加g元素要慢。 http://jsperf.com/svg-vs-g 事实上慢了30％，如果我的测试编写正确的话...。

正在努力改进它们并获得一个用于翻译的版本。当我成功时，我会更新我的答案。

- QueueHammer

---

这实际上证明了百分比单位很慢。在SVG测试中，你有两倍的百分比单位需要根据视口大小进行解析。 - Robert Longson

只需不使用百分比，改用像素(px)或其他单位即可。 - Robert Longson

O. 你能详细解释一下渲染的成本或提供相关链接吗？在我的情况下，我想使用百分比，这就是为什么我要用<svg>替换<g>的原因，这样我就不必运行任何脚本来更新页面调整大小时的元素。 - QueueHammer

我认为我在我的第一条评论中已经解释了。百分比需要根据视口大小进行解析，因此您需要向上计算层次结构以确定值是多少。 - Robert Longson

如果我想了解更多有关渲染原理的信息，那么规范文档中会有吗？另外，我认为你是查看这个问题的最佳人选... http://stackoverflow.com/questions/19772977/ - QueueHammer

不，规范是关于什么，而不是如何实现。 - Robert Longson