哪个在SVG,多个小路径或一个巨大路径中效率更高？

Question

如果我在浏览器中显示常规SVG(作为独立文件或嵌入HTML),那么在拥有大量独立路径元素和一个巨大路径元素之间,效率是否有任何理论差异？

我正在考虑从一张图片到一张完全不同的图片做某种动画.如果我可以只使用每个<path>标签绘制它们,那么它们之间的动画将更容易.然而,我担心如果路径太大,处理可能需要更长时间或效率更低.

我自己没有测试过这个问题,因为它需要手工连接很多路径,如果最终结果是非常低效,我不想浪费时间:-(

似乎无法在W3C或Mozilla上找到关于此文档的任何内容.任何评论赞赏.

Answer 1

我知道这已经很旧了，但回答一下以防对其他人有帮助：

下面绘制了一条由 1000 个随机坐标组成的线，第一个为单个路径，第二个为多个单独的路径。

我知道它作为基准测试并不是很严格，但它会导致Chrome 84 上多个路径的 Enter() 性能降低约 10 倍。

const pathSingle = [
  [0, 0]
];
const pathMultiple = [];

for (let i = 0; i < 1000; i++) {
  const pathSingleLength = pathSingle.push([
    Math.floor(Math.random() * 200),
    Math.floor(Math.random() * 200),
  ]);

  pathMultiple.push([
    pathSingle[pathSingleLength - 2],
    pathSingle[pathSingleLength - 1]
  ]);
}

const svg1 = d3
  .select("body")
  .append("svg")
  .attr('width', 200)
  .attr('height', 200);

const line = d3.line();

console.time('single');
svg1
  .selectAll('path')
  .data([{
    path: pathSingle,
  }])
  .enter()
  .append('path')
  .attr('d', d => line(d.path));
console.timeEnd('single');

const svg2 = d3
  .select("body")
  .append("svg")
  .attr('width', 200)
  .attr('height', 200);

console.time('multiple');
svg2
  .selectAll('path')
  .data(pathMultiple)
  .enter()
  .append('path')
  .attr('d', d => line(d));
console.timeEnd('multiple');

path {
  fill: none;
  stroke-width: 1px;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>

Answer 2

您不必手动执行此操作，使用小型 xml 解析器测试这一点很简单（如果必须的话，可以编写一些玩具数据）。

话虽这么说，在没有完全奇异优化的合理世界中（其中小路径在同一点上结束将成为单个长路径），长路径更好 - 但可能只有几个字节。渲染性能不应该有真正的差异 - 任何智能渲染器都会使用适当的基元，以便显卡可以并行渲染各个片段。

您当然可以找到糟糕的解析器和渲染器，所以您真正的问题将归结为几个组件：

1. 您可以控制客户使用什么解析器/渲染器吗？
2. 长路径或短路径更快吗？

如果您无法控制客户使用的内容，那么无论我们在这里说什么，您都必须构建一组测试数据并测试每个常见的排列。