8

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

我正在考虑将某种动画从一张图片变成一张完全不同的图片。如果我可以只用一个标签来绘制它们，<path>它们之间的动画就会容易得多。然而，我担心如果路径太大，处理可能需要更长的时间或效率更低。

我自己没有对此进行测试，因为它需要手动连接很多路径，如果最终证明效率非常低，我不想浪费时间:-(

在 W3C 或 Mozilla 的文档中似乎找不到任何内容。任何意见表示赞赏。

4

2 回答 2

3

我知道这已经过时了，但如果它对其他人有帮助，请回答：

下面绘制了一条由 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>

于 2020-08-10T14:22:59.107 回答
1

您不必手动完成，使用小型 xml 解析器进行测试很简单（如果需要，可以制作一些玩具数据）。

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

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

  1. 您是否可以控制客户使用的解析器/渲染器？
  2. 长路径还是短路径更快？

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

于 2013-06-18T09:00:03.037 回答