【发布时间】：2021-10-16 07:42:51
【问题描述】：
一家网络开发公司为我开发了一个网站，它使用了 Font Awesome 5.15.3 中的 12 个图标。他们使用 SVG 和 JavaScript。使用 Google PageSpeed Insights 后，我发现 Font Awesome JavaScript 成为了性能瓶颈。
然后我找到"Performance & Font Awesome"。但这并没有提供有关每种方法的太多信息。我尝试联系支持人员，但现在没有收到任何回复。所以我自己尝试用这些方法进行测试，比如 SVG Sprites 和单独的 SVG 图标，同时分享我对每种方法在性能上的优缺点的理解。
注意：我只会考虑我host Font Awesome on my own server的情况。
- SVG with JavaScript：根据我在 Chrome DevTools 中的调试，似乎 javascript 代码只是找到类似的模式并将它们替换为相应的 svg 图标。如果整个页面的 DOM 树很大，这将非常耗时。另外，如果可以手动将 SVG 图标插入该位置，为什么还要费心让 JavaScript 来完成这项任务呢？我想有3个原因：
一个。 <i class="fas fa-camera"></i> 很短（仅 29 个字符）并且比使用单个 SVG 图标（通常为 500 字节）或 SVG Sprites（3 行共 88 个字符）更方便使用。
湾。它不会使源 HTML 页面膨胀太多。
C。只有多次使用同一个图标才好，如下所示：
- 带有 CSS 的网页字体
在这种方法中，需要包含带有@font-face 规则的Font Awesome 字体文件。而大的 Font Awesome 字体文件的下载将成为性能的瓶颈。据我所知，如果我只使用 1000 个图标中的 16 个图标，则无法创建仅包含现有图标中的 16 个图标的新字体文件。
- SVG Sprites：这种方法对我来说似乎很棒。我可以创建一个只包含我需要的 16 个图标的小 svg 文件。然后使用以下方式将其包含在 HTML 页面中：
<svg>
<use xlink:href="fa-brands.svg#facebook"></use>
</svg>
虽然它需要 3 行而不是 1 行（带有 JS 的 SVG）。即使图标被多次使用，它仍然很短。我想这种方法的缺点是一个计划使用很多图标，例如 100 个图标。在这种情况下，svg文件会很大，下载时会成为性能瓶颈。
另一个缺点可能是在 SVG Sprite 文件中搜索，这需要一些时间，因为 SVG Sprite 文件中的各个图标没有以任何方式被索引。
- 单个 SVG 图标：将 SVG 图标数据嵌入 HTML 源代码将是提高性能的最有效方式。但是每个 SVG 图标文件大约 500 字节到 3KB，这会使 HTML 文件大大膨胀。另外，在页面中多次使用图标也是不好的，这样的话，HTML源会变得很大。
此外，“浏览器无法缓存内联 SVG，因为它会缓存常规图像资源，因此在加载包含图像的第一页后，包含图像的页面将不会更快地加载。”基于https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
- SVG + CSS：这个方法在 Font Awesome 中没有提到，但是被广泛使用。请参阅 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web 了解将 SVG 添加到网页的不同方法，包括 SVG + CSS。
请告知我的理解是否正确。非常感谢！
更新：
我在他们的网站上发现了一个有趣的比较：Web Fonts vs SVG
更新 2
我添加了另一种使用 SVG + CSS 的流行方法
【问题讨论】：
-
老实说，我会选择 svg sprites。即使你有一百个图标，它也只是纯文本，如果它在一个单独的文件中，它将被缓存，等等......
-
@AmauryHanser，非常感谢您分享您的意见。
标签： javascript css svg fonts font-awesome