重用符号会提高 SVG 性能吗? [英] Does reusing symbols improve SVG performance?

问题描述

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

Assuming a relatively modern, SVG-supporting desktop browser and an SVG consisting of hundreds of similar, simple nodes:

1. 文档可以设置为许多单独的形状元素(、 等)，并定义了它们自己的属性.
2. 可以将文档设置为几个 元素和许多单独的 实例，这些实例可以适当地放置它们并调整它们的大小(W3 规范).

1. The document could be set up as many individual shape elements (<circle>, <line>, etc.) with their own attributes defined.
2. The document could be set up as a few <symbol> elements and many individual <use> instances that place them and size them appropriately (W3 spec).

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

I understand the semantic and code-maintenance reasons to use <symbols>/<use>, but I'm not concerned with those now, I'm strictly trying to optimize rendering, transformation and DOM update performance. I could see <symbol> working similar to reusing sprites in Flash, conserving memory and being generally a good practice. However, I'd be surprised if browser vendors have been thinking this way (and this isn't really the intent of the feature).

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

• / 性能是否有任何明确的模式?
• 它对单个浏览器实现的独特性如何?
• 重用 与 与嵌套 之间有区别吗?

• Are there any clear patterns to <symbol>/<use> performance?
• How idiosyncratic is it to individual browser implementations?
• Are there differences between reusing <symbol> vs <g> vs nested <svg>?

推荐答案

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

Rohit Kalkur compared rendering speed of the creation of 5000 SVG symbols using use against directly creating the SVG symbol's shapes, see here. It turns out that rendering SVG shapes using use was almost 50% slower. He reasons that:

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

The use element takes nodes from within the SVG document, and duplicates them in a non-exposed DOM

鉴于此，我认为使用 SVG symbols 充其量与手动创建 symbolss 形状一样高效.

Given this, I assume that using SVG symbols is at best as performant as manually creating the symbolss shape.

这篇关于重用符号会提高 SVG 性能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！