在React中加载SVG的性能

Question

我正在使用React将SVG文件加载到页面。我有两个解决方案：

1. 将SVG写入页面。我被告知这更快，但它变得非常混乱

<svg>
  <path d="awfully long data"/>
</svg>

1. 为svg提供单独的.svg文件并使用
加载它们

<svg>
  <use xlinkHref="path/to/svg.svg#symbolid" />
</svg>

我在这里问哪个更快？它甚至意义重大吗？当与React一起使用时会产生很大的影响吗？

Answer 1

• 第一次访问：案例1获胜。
• 重复访问：案例2获胜。

案例1.您将SVG写入页面的位置会稍微快一点+它会为您节省一个请求。这意味着，对于第一次访问，它非常适用于折叠内容。

但在这种情况下，由于SVG是文档的一部分，因此它不会被缓存，也不会在页面之间重复使用。这意味着您将在重复访问时失去性能。用户浏览多个页面，总是下载包含内联SVG的页面，而不是使用缓存版本，就像在案例2中一样。

这里有一些有用的阅读https://osvaldas.info/caching-svg-sprite-in-localstorage

Answer 2

因此，在对两种情况进行测试后，对于没有任何网络限制的系统，没有可记录的差异。通过GPRS上的网络限制，内联速度非常快;对我来说只需0.1秒。