研究 CSS 字体加载策略对首次渲染性能的影响 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 字体加载策略对首次渲染性能的影响

大家好！今天我们来深入探讨一个看似简单，但对网站性能至关重要的话题：CSS 字体加载策略对首次渲染性能的影响。作为一名开发人员，我们都知道用户对网站的加载速度非常敏感。而字体，作为网站视觉呈现的重要组成部分，其加载方式直接影响着用户体验。不恰当的字体加载策略可能会导致阻塞渲染、FOIT（Flash of Invisible Text，文本闪烁不可见）或 FOUT（Flash of Unstyled Text，文本闪烁无样式）等问题，严重影响首次渲染速度。

1. 字体加载的背后：浏览器渲染流程与关键渲染路径

要理解字体加载策略的影响，我们首先需要了解浏览器渲染网页的基本流程，以及其中的关键渲染路径（Critical Rendering Path）。

浏览器渲染流程大致可以分解为以下几个步骤：

解析 HTML： 浏览器解析 HTML 代码，构建 DOM 树（Document Object Model）。
解析 CSS： 浏览器解析 CSS 代码，构建 CSSOM 树（CSS Object Model）。
构建渲染树（Render Tree）： 浏览器将 DOM 树和 CSSOM 树合并，构建渲染树。渲染树只包含需要显示的节点，以及这些节点的样式信息。
布局（Layout）： 浏览器计算渲染树中每个节点的位置和大小，也就是进行布局。
绘制（Paint）： 浏览器将渲染树中的节点绘制到屏幕上。

关键渲染路径是指浏览器为了首次渲染页面所需的最少资源和步骤。它关注的是如何尽快地将首屏内容呈现给用户。在这个过程中，CSS 和 JavaScript 都是阻塞渲染的资源。也就是说，浏览器在下载、解析和执行 CSS 和 JavaScript 之前，会暂停渲染。

字体作为 CSS 的一部分，也参与到这个阻塞渲染的过程中。 当浏览器遇到一个需要使用自定义字体的 CSS 规则时，它会：

检查字体是否已经下载。
如果字体未下载，浏览器会发起字体文件的下载请求。
在字体下载完成之前，浏览器的行为取决于字体加载策略。 默认情况下，浏览器会阻塞文本的渲染，直到字体下载完成。这就是导致 FOIT 的原因。

2. 常见的字体加载策略及其优缺点

现在，我们来详细讨论几种常见的字体加载策略，以及它们各自的优缺点。

2.1. 默认策略 (FOIT – Flash of Invisible Text)

这是浏览器默认的字体加载行为。当浏览器遇到一个需要使用自定义字体的元素时，它会先发起字体文件的下载请求。在字体文件下载完成之前，该元素中的文本将完全不可见。一旦字体下载完成，文本会立即以正确的字体显示出来。

优点：

简单易懂，无需额外配置。
确保最终呈现的文本始终使用指定的字体。

缺点：

用户体验差。在字体加载期间，文本不可见，导致页面出现空白或闪烁。
严重影响首次渲染速度。由于字体下载阻塞渲染，用户需要等待更长时间才能看到内容。

代码示例：

body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，如果 ‘MyCustomFont’ 字体尚未下载，浏览器会阻塞 body 元素的渲染，直到字体下载完成。

2.2. FOUT (Flash of Unstyled Text)

FOUT 指的是“未样式文本闪烁”。这种策略下，浏览器在字体下载完成之前，会先用系统默认字体显示文本。一旦自定义字体下载完成，文本会立即切换到自定义字体。

优点：

改善用户体验。用户可以立即看到文本内容，即使样式不正确。
提高首次渲染速度。由于不阻塞渲染，页面可以更快地呈现给用户。

缺点：

文本闪烁。从系统默认字体切换到自定义字体的过程可能会引起视觉上的跳跃，影响用户体验。
布局偏移。自定义字体和系统默认字体在尺寸上可能存在差异，导致文本布局发生偏移。

实现 FOUT 的常见方法是使用 font-display CSS 属性。

font-display 属性允许我们控制字体加载期间的行为。它有以下几个可选值：

auto: 浏览器的默认行为（通常等同于 block，即 FOIT）。
block: 浏览器会短暂地阻塞文本渲染，如果字体在短时间内加载完成，则正常显示。如果超时，则显示备用字体，并在字体加载完成后切换到自定义字体。（与auto 类似，倾向于 FOIT）
swap: 浏览器会立即使用备用字体显示文本，并在字体加载完成后切换到自定义字体。（倾向于 FOUT）
fallback: 浏览器会短暂地阻塞文本渲染，如果字体在短时间内加载完成，则正常显示。如果超时，则显示备用字体，并在字体加载完成后的短时间内继续显示备用字体，以避免频繁的字体切换。（介于 FOIT 和 FOUT 之间）
optional: 浏览器会根据用户的网络情况和设备性能来决定是否下载字体。适用于非关键字体，例如图标字体。

代码示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，我们使用 font-display: swap 来指示浏览器使用 FOUT 策略。这意味着浏览器会立即使用 sans-serif 字体显示文本，并在 ‘MyCustomFont’ 字体下载完成后切换到该字体。

2.3. 预加载 (Preload)

预加载是一种告诉浏览器提前下载特定资源的机制。通过预加载字体，我们可以确保字体在浏览器需要使用它之前就已经下载完成，从而避免 FOIT 或 FOUT。

优点：

减少 FOIT 或 FOUT 的发生。
提高首次渲染速度。通过提前下载字体，减少了渲染阻塞的时间。

缺点：

可能浪费带宽。如果预加载的字体最终没有被使用，就会浪费带宽。
需要谨慎使用。过度预加载会增加页面的加载时间。

预加载可以通过 <link> 标签来实现。

代码示例：

<head>
  <link rel="preload" href="my-custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('my-custom-font.woff2') format('woff2');
      font-display: swap;
    }

    body {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>

在这个例子中，我们使用 <link rel="preload"> 标签来预加载 ‘my-custom-font.woff2’ 字体。as="font" 属性告诉浏览器这是一个字体资源，type="font/woff2" 属性指定了字体文件的 MIME 类型，crossorigin="anonymous" 属性用于处理跨域字体加载。配合 font-display: swap 可以做到更佳的用户体验，先显示系统字体，等到自定义字体加载完毕后迅速替换。

2.4. 字体子集化 (Font Subsetting)

字体文件通常包含大量的字符，但一个网站可能只需要使用其中的一部分字符。字体子集化指的是创建一个只包含网站所需字符的字体文件。

优点：

减小字体文件的大小。
提高字体加载速度。
节省带宽。

缺点：

需要额外的工具和流程来生成字体子集。
如果网站需要使用新的字符，需要重新生成字体子集。

字体子集化可以通过多种工具来实现，例如：

FontForge
Glyphhanger
在线字体子集化工具

代码示例（使用 Glyphhanger）：

安装 Glyphhanger：

npm install -g glyphhanger

提取网站使用的字符：

glyphhanger --whitelist=./index.html --subset=MyCustomFont.woff2

这条命令会分析 index.html 文件，提取其中使用的字符，并生成一个名为 MyCustomFont-subset.woff2 的字体子集文件。

在 CSS 中使用字体子集：

@font-face {
  font-family: 'MyCustomFont';
  src: url('MyCustomFont-subset.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

2.5. 字体压缩 (Font Compression)

字体压缩是指使用压缩算法来减小字体文件的大小。常见的字体压缩格式包括 WOFF2、WOFF 和 EOT。

优点：

减小字体文件的大小。
提高字体加载速度。
节省带宽。

缺点：

需要选择合适的字体压缩格式。
某些旧版本的浏览器可能不支持最新的字体压缩格式。

推荐使用 WOFF2 格式，因为它具有最好的压缩率和广泛的浏览器支持。

代码示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff'),
       url('my-custom-font.eot') format('embedded-opentype');
  font-display: swap;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

在这个例子中，我们提供了 WOFF2、WOFF 和 EOT 三种字体格式，以兼容不同的浏览器。浏览器会选择它支持的最好的格式。

2.6. 使用系统字体 (System Fonts)

系统字体是指操作系统自带的字体。使用系统字体可以避免字体加载，从而提高首次渲染速度。

优点：

无需加载字体。
提高首次渲染速度。

缺点：

样式受限。无法使用自定义字体。
跨平台一致性问题。不同的操作系统和浏览器使用的系统字体可能不同，导致页面在不同平台上的显示效果不一致。

代码示例：

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

在这个例子中，我们使用了 system-ui 字体族，它会根据用户的操作系统和浏览器选择合适的系统字体。

3. 选择合适的字体加载策略

选择合适的字体加载策略需要权衡用户体验、性能和设计需求。以下是一些建议：

优先考虑用户体验。 尽量避免 FOIT，使用 FOUT 或预加载来提高首次渲染速度。
使用 font-display 属性来控制字体加载行为。 swap 和 fallback 是比较常用的值。
预加载关键字体。 确保关键字体在浏览器需要使用它之前就已经下载完成。
使用字体子集化和压缩来减小字体文件的大小。
根据网站的需求选择合适的字体格式。 推荐使用 WOFF2 格式。
避免过度使用自定义字体。 尽量使用系统字体，或者只对关键元素使用自定义字体。
定期进行性能测试，并根据测试结果调整字体加载策略。

我们可以用一个表格来总结一下各种字体加载策略的优缺点：

策略	优点	缺点	适用场景
默认策略 (FOIT)	简单易懂，无需额外配置，确保最终呈现的文本始终使用指定的字体。	用户体验差，严重影响首次渲染速度。	不推荐使用。
FOUT	改善用户体验，提高首次渲染速度。	文本闪烁，布局偏移。	适用于对首次渲染速度要求较高的场景。
预加载	减少 FOIT 或 FOUT 的发生，提高首次渲染速度。	可能浪费带宽，需要谨慎使用。	适用于关键字体。
字体子集化	减小字体文件的大小，提高字体加载速度，节省带宽。	需要额外的工具和流程来生成字体子集，如果网站需要使用新的字符，需要重新生成字体子集。	适用于只需要使用部分字符的场景。
字体压缩	减小字体文件的大小，提高字体加载速度，节省带宽。	需要选择合适的字体压缩格式，某些旧版本的浏览器可能不支持最新的字体压缩格式。	适用于所有使用自定义字体的场景。
使用系统字体	无需加载字体，提高首次渲染速度。	样式受限，跨平台一致性问题。	适用于对样式要求不高，且需要快速加载的场景。

4. 使用 Lighthouse 进行性能分析

Google Lighthouse 是一个开源的自动化工具，用于改进网站的质量。它可以帮助我们分析网站的性能，并提供改进建议。

Lighthouse 可以检测字体加载相关的问题，例如：

阻塞渲染的字体
未压缩的字体
未优化的字体

使用 Lighthouse 进行性能分析的步骤：

打开 Chrome 开发者工具 (F12)。
选择 "Lighthouse" 面板。
选择要分析的类别（例如 "Performance"）。
点击 "Generate report"。

Lighthouse 会生成一份详细的报告，其中包含字体加载相关的性能指标和改进建议。

5. 字体服务提供商的优化

除了上述策略，我们还可以通过使用字体服务提供商（例如 Google Fonts、Adobe Fonts）来优化字体加载。这些服务提供商通常会提供 CDN 加速、字体优化等功能，可以帮助我们提高字体加载速度。

使用字体服务提供商的优点：

CDN 加速。字体文件存储在 CDN 上，可以从离用户最近的服务器加载，提高加载速度。
字体优化。字体服务提供商通常会对字体文件进行优化，例如字体子集化、字体压缩等。
简化字体管理。无需自己管理字体文件，减少了维护成本。

代码示例（使用 Google Fonts）：

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

在这个例子中，我们使用了 Google Fonts 提供的 Roboto 字体。rel="preconnect" 属性告诉浏览器提前建立与 Google Fonts 服务器的连接，display=swap 参数使用了 font-display: swap 策略。

6. 实践案例：一个简单的博客网站

假设我们有一个简单的博客网站，其中使用了自定义字体 ‘Open Sans’。为了优化字体加载，我们可以采取以下步骤：

使用 WOFF2 格式的字体文件。
使用 font-display: swap 策略。

@font-face {
  font-family: 'Open Sans';
  src: url('open-sans.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'Open Sans', sans-serif;
}

预加载字体文件。

<head>
  <link rel="preload" href="open-sans.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'Open Sans';
      src: url('open-sans.woff2') format('woff2');
      font-display: swap;
    }

    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>

使用 Lighthouse 进行性能分析，并根据分析结果进行调整。

通过以上步骤，我们可以显著提高博客网站的字体加载速度，改善用户体验。

如何选择？

字体加载策略的选择是一个需要权衡的过程。没有一种策略是万能的，我们需要根据网站的具体情况选择合适的策略。

总的来说，优先考虑用户体验，使用 font-display: swap 或 font-display: fallback 策略，并预加载关键字体，是一个比较好的选择。

持续优化

字体加载优化是一个持续的过程。我们需要定期进行性能测试，并根据测试结果调整字体加载策略。随着浏览器技术的不断发展，新的字体加载策略也会不断涌现。我们需要保持学习，不断探索新的优化方法，以确保我们的网站始终具有最佳的性能。

CSS 字体加载策略对首次渲染性能的影响

1. 字体加载的背后：浏览器渲染流程与关键渲染路径

2. 常见的字体加载策略及其优缺点

2.1. 默认策略 (FOIT – Flash of Invisible Text)

2.2. FOUT (Flash of Unstyled Text)

2.3. 预加载 (Preload)

2.4. 字体子集化 (Font Subsetting)

2.5. 字体压缩 (Font Compression)

2.6. 使用系统字体 (System Fonts)

3. 选择合适的字体加载策略

4. 使用 Lighthouse 进行性能分析

5. 字体服务提供商的优化

6. 实践案例：一个简单的博客网站

如何选择？

持续优化

发表回复 取消回复

发表回复取消回复