`preconnect`指令是优化web字体加载的关键技术，它通过预先建立与字体服务器的连接，显著减少了关键资源的获取时间。对于google fonts，`preconnect`到`fonts.googleapis.com`和`fonts.gstatic.com`能有效缓解文本闪烁（fout）或不可见（foit）的问题，从而提升用户体验和页面渲染性能。
理解Web字体加载的挑战
在网页中引入自定义字体（Web Font）能够极大地丰富页面的视觉表现力。然而，Web字体的加载过程并非总是无缝的，它可能导致两种常见的用户体验问题：
-
文本不可见闪烁 (FOIT - Flash of Invisible Text)：大多数现代浏览器（如Chrome、Safari、Edge、IE）在字体文件加载完成之前，会显示使用该字体的文本区域为空白。这可能导致页面在字体加载期间出现视觉上的“空洞”，影响用户阅读体验。
-
文本样式闪烁 (FOUT - Flash of Unstyled Text)：Mozilla Firefox浏览器采取不同的策略，它会先使用系统默认字体显示文本，待Web字体加载完成后再重新渲染。这种“先显示默认字体，再切换到自定义字体”的过程被称为FOUT，虽然避免了空白区域，但仍可能造成页面内容的抖动或重新布局。
为了解决这些问题，优化Web字体的加载速度变得至关重要。
preconnect指令的作用机制
rel="preconnect" 是HTML <link> 元素的一个属性，它向浏览器发出一个“提示”，表明用户很可能需要从目标源获取资源。浏览器接收到这个提示后，会尝试在实际请求资源之前，预先与该源建立连接。这个预连接过程通常包括：
-
DNS解析 (DNS Lookup)：将域名解析为IP地址。
-
TCP握手 (TCP Handshake)：建立客户端与服务器之间的TCP连接。
-
TLS协商 (TLS Negotiation)：如果使用HTTPS，还会进行TLS/SSL加密握手。
通过提前完成这些耗时的网络操作，当实际的资源请求（如CSS文件或字体文件）发出时，可以立即开始数据传输，从而显著减少整体加载时间。
Google Fonts中的preconnect实践
在使用Google Fonts时，我们通常会看到以下推荐的代码片段，其中包含了两条preconnect指令：
<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=Quicksand:wght@500&display=swap" rel="stylesheet">
登录后复制
让我们详细解析这两条preconnect指令各自的作用：
-
preconnect到 https://fonts.googleapis.com
-
作用： 这个域名主要用于提供Google Fonts的CSS样式表。当你通过<link>标签引入字体时，浏览器首先会向fonts.googleapis.com请求一个CSS文件（例如css2?family=Quicksand:wght@500&display=swap）。这个CSS文件包含了 @font-face 规则，指明了实际字体文件（如WOFF2格式）的URL，以及这些字体应该从哪个域名下载。
-
优化效果： 预连接到fonts.googleapis.com意味着浏览器可以更快地获取到这个关键的CSS文件。一旦CSS文件加载完成并被解析，浏览器就能立即知道需要下载哪些字体文件，以及它们位于何处。
-
preconnect到 https://fonts.gstatic.com
-
作用： fonts.gstatic.com 是Google Fonts实际托管字体二进制文件（例如.woff2、.ttf等）的域名。在浏览器获取并解析了fonts.googleapis.com提供的CSS文件后，它会根据CSS中指定的URL，向fonts.gstatic.com请求下载具体的字体文件。
-
优化效果： 预连接到fonts.gstatic.com确保了当浏览器准备下载实际的字体文件时，与该服务器的连接已经建立完毕，可以直接开始下载，避免了额外的网络延迟。
-
crossorigin属性： 对于跨域加载的字体资源，通常需要设置crossorigin属性。这是因为字体文件默认以匿名方式加载，如果没有此属性，某些浏览器可能无法正确处理字体。
总结加载流程：
- 浏览器遇到preconnect指令，开始与fonts.googleapis.com和fonts.gstatic.com建立连接。
- 浏览器遇到<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">，向fonts.googleapis.com请求CSS文件。由于已经预连接，这个请求会更快完成。
- 浏览器解析CSS文件，获取字体文件的URL（这些URL指向fonts.gstatic.com）。
- 浏览器向fonts.gstatic.com请求字体文件。由于已经预连接，字体文件下载会更快开始并完成。
- 字体加载完成后，页面文本以自定义字体渲染，最大限度地减少了FOIT或FOUT的影响。
最佳实践与注意事项
-
放置位置： preconnect指令应尽可能早地放置在HTML文档的<head>标签内，以便浏览器能尽早开始预连接。
-
谨慎使用： 尽管preconnect能带来性能提升，但也不应滥用。每个preconnect指令都会消耗一定的CPU和网络资源来建立连接。因此，只对关键的、高优先级的第三方源使用preconnect。
-
结合font-display属性： 除了preconnect，还可以使用CSS的font-display属性（例如在Google Fonts的URL中常见的&display=swap）来控制字体加载期间文本的显示行为。swap值能够立即显示备用字体，字体加载完成后再切换，有助于缓解FOIT问题，但可能仍有FOUT。
通过合理利用preconnect指令，我们可以显著优化Web字体的加载性能，提升用户体验，并有助于改善页面加载速度相关的Core Web Vitals指标。
以上就是提升Web字体加载性能：preconnect与Google Fonts的实践的详细内容，更多请关注php中文网其它相关文章！
广告
882
收藏
