时间戳

首页 > 解决方案 > 字体真棒的表现

javascript - 字体真棒的表现

问题描述

一家网络开发公司为我开发了一个网站，它使用了 Font Awesome 5.15.3 中的 12 个图标。他们使用 SVG 和 JavaScript。使用 Google PageSpeed Insights 后，我发现 Font Awesome JavaScript 成为了性能瓶颈。

然后我找到"Performance & Font Awesome"。但这并没有提供有关每种方法的太多信息。我尝试联系支持人员，但现在没有收到任何回复。所以我自己尝试用这些方法进行测试，比如SVG Sprites和单独的SVG图标，同时分享我对每种方法在性能上的优缺点的理解。

注意：我只会考虑我在自己的服务器上托管 Font Awesome的情况。

  1. 带有 JavaScript 的 SVG：根据我在 Chrome DevTools 中的调试，似乎 javascript 代码只是找到类似的模式并将它们替换为相应的 svg 图标。如果整个页面的 DOM 树很大，这将非常耗时。另外，如果可以手动将 SVG 图标插入该位置，为什么还要费心让 JavaScript 来完成这项任务呢？我想有3个原因：

一个。<i class="fas fa-camera"></i>很短（仅 29 个字符）并且比使用单个 SVG 图标（通常 500 字节）或 SVG Sprites（3 行，总共 88 个字符）更方便使用。湾。它不会使源 HTML 页面膨胀太多。C。只有多次使用相同的图标才好，如下所示：

在此处输入图像描述

  1. 带有 CSS 的 Web 字体

在这种方法中，需要使用 @font-face 规则包含 Font Awesome 字体文件。而大的 Font Awesome 字体文件的下载将成为性能的瓶颈。据我所知，如果我只使用 1000 个图标中的 16 个图标，则无法创建一个仅包含现有图标中的 16 个图标的新字体文件。

  1. 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 文件中的各个图标没有以任何方式被索引。

  1. 单个 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

  1. 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 的流行方法

标签： javascriptcsssvgfontsfont-awesome

解决方案

根据我自己的个人经验，我可以告诉你，我更喜欢使用 12 个图标的方法 VS 其他任何方法。当并非所有主要浏览器都很好地执行 svg 标准时，Web 字体是很好的解决方案。但是今天，当你只使用 12 个图标时，使用臃肿的图标字体是无稽之谈。如果您希望能够衡量离开字体并改用 svg 图标的影响，请在此处查看我自己的网站的性能和速度https://www.simbiosis-dg-apps.com. 我告诉你，除了我和我的搭档的 2 张照片之外，你会看到的其他所有东西都是 svg。有时嵌入到 html 中，大部分时间通过 img 标签调用。对于图标，我使用了一种类似的方法，例如用于从图标字体设置图标但使用我自己的 css 系统的方法。如果想要更好的图片，请参阅此答案如何在 CSS(Font Awesome) 中用 SVG 图标替换 Web 字体？

推荐阅读