在 React 中加载 SVG 的性能

Question

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

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

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

2. 为 svg 准备一个单独的 .svg 文件并使用
加载它们

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

我是来问一下哪个更快？它甚至重要吗？与 React 一起使用时会产生很大的影响吗？

Answer 1

所以在测试这两种情况之后，对于我的没有任何网络限制的系统，没有可记录的差异。通过 GPRS 上的网络节流，内联速度稍微快一些；对我来说只有 0.1 秒。

Answer 2

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

案例1. 将SVG 写入页面会稍微快一些+ 会节省一个请求。这意味着它非常适合首次访问的重要首屏内容。

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

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