1. 预连接（preconnect）与资源域的协同工作
1) 预连接的工作原理
当浏览器加载页面时，预连接（preconnect）会提前建立与目标域的 TCP 握手 与 DNS 查询，从而在后续资源请求时减少等待时间。通过这种方式，跨域资源加载的初始延迟被削减，特别是对外部字体、CDN 资源和分析脚本等。
需要注意的是，预连接不同于 DNS 预解析（dns-prefetch），后者只进行域名解析，不会建立实际的连接或 TLS 会话。因此，预连接对加载性能的改善在对需要建立连接的资源特别明显。
2) 如何在实际网页中应用 preconnect
为了让浏览器尽早建立与字体和 CDN 的连接，通常在页面 head 中加入两组 link 标签：fonts.googleapis.com 与 fonts.gstatic.com，并对后者添加 crossorigin 属性以确保安全的跨域资源请求。
这种做法可以显著减少字体资源在首次渲染时的阻塞时间，尤其是在用户首次打开包含大量外部资源的页面时。要点在于避免过量的 preconnect，以免造成额外的并发连接开销。
2. 双域策略的原理与实现
1) 双域策略为何能提升加载性能
谷歌字体通过两台域名提供服务：fonts.googleapis.com 提供字体 CSS，而 fonts.gstatic.com 提供实际的字体文件。将这两个域名分开，可以让浏览器对这两类资源进行 并行连接，并且提升缓存命中概率，从而缩短 字体渲染时间。
在实现上，结合 preconnect 与 跨域加载，可让字体 CSS 的下载几乎立即触发字体文件的加载，减少页面在首次渲染阶段的阻塞。
2) 如何正确实现双域策略
正确的实现路径包括在页面头部为两个域名添加 preconnect，并通过 display=swap 参数请求字体 CSS，以保障文本可见性。还应确保字体的加载顺序尽量不阻塞关键渲染路径。
示例代码展示了如何同时对 Google Fonts 的两大域建立连接并加载字体样式：preconnect、跨域属性、以及带有 display=swap 的链接。
3) 与缓存策略的关系
双域策略还应结合浏览器缓存策略来优化首次与后续访问的加载时间。字体文件的缓存往往比 CSS 规则更适合缓存，因而通过合理的 缓存头设置 与域名分离，能够提高重复访问的字体加载速度。
实践中，使用标准的字体 CSS 规则和合理的 Cache-Control，可以在用户再次访问时快速命中已有字体资源，降低对网络的持续依赖。
3. Google Fonts 加载性能优化要点
1) 使用 display=swap 与 font-display
在 Google Fonts 的请求中加入 display=swap，可以确保文本在字体文件加载完成前仍可显示，降低对用户体验的影响。这与 CSS 层面的 font-display: swap 行为是一致的，确保了 FOIT（flash of invisible text）现象的减少。
与之配套的是使用高效的字体族和合适的字体粗细组合，避免加载过多无用的字体文件，以保持网络带宽的可用性与渲染速度。
2) 资源加载顺序与缓存策略
将关键资源放在首屏的网络路径中加载，并通过 preconnect 与合适的缓存策略减少重复的网络请求。对于字体文件，浏览器通常会从缓存中快速命中，提升首次渲染的速度。
通过对字体 CSS 与实际字体文件的域名分离，可以让浏览器在不同阶段完成加载任务，缩短渲染时间，并在后续页面切换时降低重复下载的概率。
3) 与更广泛的前端性能优化的结合
除了字体加载本身，谷歌字体的高效加载还要配合对其它静态资源的优化，例如将 CSS、JavaScript、图片等资源分离到不同域或使用 CDN，从而实现更好的并行下载与缓存策略。通过对页面的关键路径进行分析，可以清晰地看到 font 加载在页面渲染中的占比以及潜在的瓶颈。
