在SVG中，多条小路径还是一条大路径更有效？

如果我在浏览器中显示一个常规的SVG（作为独立文件或嵌入HTML），那么拥有许多单独的路径元素和一个巨大的路径元素在效率上有什么理论区别吗

我在考虑从一张图片到另一张完全不同的图片做一些动画。如果我可以用一个

标记来绘制它们，那么在它们之间设置动画就会容易得多。不过，我担心如果路径太大，处理时间可能会更长或效率更低

我自己没有测试过，因为这需要手动连接许多路径，如果最终证明效率非常低，我不想浪费时间：-(

---

在W3C或Mozilla的文档中似乎找不到关于此的任何内容。欢迎发表任何评论。

您不必手工操作，用一个小型xml解析器测试这一点很简单（如果有必要，可以制作一些玩具数据）

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

您肯定会发现不好的解析器和渲染器，因此您真正的问题将归结为几个组件：

您是否可以控制客户使用的解析器/渲染器

这是长路径还是短路径更快

---

如果你不能控制你的客户在使用什么，那么不管我们在这里说什么，你都必须建立一组测试数据，并对每个常见的排列进行测试。

我知道这是一个古老的问题，但如果回答它有助于其他人：

下面绘制了一条包含1000个随机坐标的线，第一条为单路径，第二条为多条独立路径

我知道它作为一个基准不是很严格，但它会导致Chrome 84上多路径的enter（）性能降低10倍

const path single=[
[0, 0]
];
常量pathMultiple=[]；
for（设i=0；i<1000；i++）{
常量pathSingleLength=pathSingle.push([
Math.floor（Math.random（）*200），
Math.floor（Math.random（）*200），
]);
多路径推送([
pathSingle[pathSingleLength-2]，
pathSingle[pathSingleLength-1]
]);
}
常数svg1=d3
.选择（“正文”）
.append（“svg”）
.attr（'width'，200）
.attr（'height'，200）；
常量行=d3.line（）；
控制台。时间（'single'）；
svg1
.selectAll（'路径'）
.数据([{
路径：pathSingle，
}])
.输入（）
.append（'路径'）
.attr（'d'，d=>行（d.path））；
控制台。timeEnd（'single'）；
常数svg2=d3
.选择（“正文”）
.append（“svg”）
.attr（'width'，200）
.attr（'height'，200）；
控制台。时间（'multiple'）；
svg2
.selectAll（'路径'）
.数据（路径多个）
.输入（）
.append（'路径'）
.attr（'d'，d=>第（d）行）；
console.timeEnd（'multiple'）；

路径{
填充：无；
笔画宽度：1px；
笔画：黑色；
}

---

基准测试，基准测试，基准测试，然后将结果作为答案发布；-）@JanDvorak Yeah。。。在阅读了Nick Bastin的答案之后，我将继续实施它，并测试它有多大的不同。我只是希望有人能说“哦，是的，长路径解析比多个短路径解析慢得多/快得多；每个人都知道这一点！”我直觉上会使用一个大路径@詹德沃夏克：即使只是在一个特定的平台上计算运行时间，这也将是一项艰巨的任务。也许MDN或goggle代码中的一些工具会有所帮助。有什么提示吗？@capelical很可能会有所帮助here@JanDvorak：谢谢！我希望它对非JS的东西也有用，比如SVG

，不管我们在这里说什么，你都必须[…]测试[…]：-/我感觉可能是这样。顺便说一句，我之所以需要手工操作，是因为路径来自多个不同的源，否则我只是按照您的建议构建了一个简单的解析器。不过，多亏了你的回答，我至少更有信心，任何差异都可能可以忽略不计。现在测试它的机会成本似乎不那么高。干杯@DavidJohnWelsh好吧，我只是说为了测试的目的，你可以伪造一些数据，用一个简单的解析器缝合/解开路径。