性能
我们非常注重让 Font Awesome 加载快速轻便,并且提供了多种选项,您可以选择最适合您项目的方案。
以下是有关使用 Font Awesome 的不同方法以及进行一些调整或实施决策可以真正帮助提高您网站或应用程序性能的详细信息。
创建子集
工具包自定义子集
您可以 创建 Font Awesome 的自定义子集,使用任何 Pro 工具包。
按图标进行子集
在工具包的“设置”选项卡中,选择要在“样式”部分中包含的样式。我们只加载您选择的样式。
按样式进行子集
在工具包的“设置”选项卡中,选择“自定义子集”,然后从工具包的“图标”选项卡中选择要包含的每个样式中的图标。
最棒的是,您可以让我们托管您的子集工具包,也可以下载它并自行托管。
自行托管时限制样式
您是否只使用一两种样式?或者只使用一种样式加上品牌?您可以通过只将这些文件添加到您的项目中来减少加载的图标数量。
仅加载 Font Awesome 的一个版本
如果您已经使用 Font Awesome 一段时间,并且正在加载旧版本和版本 6,或者在其他版本的 Font Awesome 可能通过插件或主题加载的生态系统中使用它,我们建议您尽可能删除这些旧版本,以获得最佳性能,这样您就不会加载所有图标和资产两次。
使用 JavaScript 的 SVG 性能
当您通过 使用 JavaScript 的 SVG 方法使用 Font Awesome 时,Font Awesome JavaScript 会在页面内容中查找带有 Font Awesome 类别的 <i>
标签,然后将这些元素替换为 SVG,浏览器随后会执行 SVG 代码,使图标在页面上显示。(技术细节!我们使用批处理变异来尽可能提高性能。)
使用 JavaScript 的 SVG 适合以下情况
- 您没有太多图标需要显示
- 您可以使用 JavaScript 子集来减少文件大小
- 用户代理(浏览器)资源限制较小(具有更快的 CPU 和足够的内存)
使用 CSS 的 Web 字体性能
当您通过 使用 CSS 的 Web 字体 方法使用 Font Awesome 时,浏览器会从 CSS 中定义的 Font Awesome 字体系列获取图标,就像它对任何其他自定义字体一样。这是 Font Awesome 最初创建的方法,从很久以前就存在,并且经受住了时间的考验。
使用 CSS 的 Web 字体适合以下情况
- 您更喜欢经过实战检验的成熟 Web 字体技术
- 您有大量图标需要显示
- 用户代理(浏览器)资源限制较小(较慢的 CPU)
使用 SVG 精灵的性能
当您将 Font Awesome 用作 SVG 精灵 时,所有图标都将排列在一个单个精灵文件中,CSS 将在您的网站上将图标显示为符号。
SVG 精灵适合以下情况
- 您只有少量图标
- 您无法或不想依赖 JavaScript
- 您愿意自行使用 CSS 样式化图标
- 用户代理(浏览器)资源限制较小(较慢的 CPU)
使用单个 SVG 图标的性能
使用 原始 SVG 文件 是一种非常低级的直接将原始 SVG 添加到您的网站的方法,无需任何样式设置帮助。
原始 SVG 适合以下情况
- 单个小文件(请求)对您来说很有效,或者您直接将 SVG 嵌入到页面中
- 您无法或不想依赖 JavaScript
- 您愿意自行使用 CSS 样式化图标