重用符号会提高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. 可以使用定义了自己属性的尽可能多的单个形状元素(<circle>，<line>等)来设置文档.
2. 可以将文档设置为几个<symbol>元素以及许多单独的<use>实例，以放置它们并适当调整它们的大小(

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).

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

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的整个生命周期中更改或添加基本符号，只希望实例位置，大小等

• <symbol>/<use>的性能是否有明确的模式?
• 与各个浏览器的实现方式有何不同?
• 重用<symbol>与<g>与嵌套<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 比较了作品的渲染速度使用use反对直接创建SVG符号形状的5000个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 symbol s最多与手动创建symbols s形状一样有效.

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

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