使用非阻塞 CSS 加载字体
字体第一次绘制的性能是一个问题，它们是阻塞式的资源，也会让应用它们的文本在该字体下载时不可见 。使用上述示例中的非阻塞链接，就可能在幕后下载包含字体数据的样式表，不阻塞压面的渲染：
CSS Code复制内容到剪贴板
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="font.css" media="none" onload="if(media!=’all’)media=’all’">
font.css 包含一个 base64 编码的 WOFF 版本的 Merriweather 字体。
CSS Code复制内容到剪贴板
@font-face {
font-family: Merriweather;
font-style: normal;
font-weight: 400;
src: local(‘Merriweather’), url(‘data:application/x-font-woff;charset=utf-8;base64,…’)
}
main.css 包含了需要应用到站点的所有样式规则。下面是字体的声明：
CSS Code复制内容到剪贴板
body {
font-family: Merriweather, "Lucida Grande", …;
}
当字体正在下载时，第一个匹配到的备用回退字体 (这里就是 Lucida Grande) 被用来渲染页面的内容。 一旦字体样式表被应用了，Merriweather 就会被使用. 我尝试去确保回退的字体将相似的布局特征共享给优先选择的字体，那样不可避免的回流就尽可能微妙了。
我在基于一个模拟的 3G 网络连接的 Chrome 中，使用我的 Google Analytics Debugger 站点 拿阻塞和非阻塞方式进行了对比测试。本地的测试产生了如下所示的网络图；注意 DOMContentLoaded 在更早的 450ms 触发了，而资源在运用了非阻塞技术后下载起来更快了： 
模拟 3G 网络的图形。顶部显示了阻塞式的字体。底部显示了非阻塞式的字体。
将其部署到一个测试服务器并在 3G 连接环境下运行 webpagetest 构造产生了如下时间线 ： 
3G 时间线。顶部显示阻塞式的字体，底部展示非阻塞式的字体。
两种方法都花了2.8秒钟来完整的渲染页面，但是非阻塞方法比一般的阻塞方法使得绘制早了1秒钟。在在主样式表进行了内联的情况下运行相同的测试，显示了在将非阻塞 CSS 被应用于处理字体时有0.7秒的时间优势： 
