优雅地加载Fonts

标签中的样式表被Lighthouse标记为阻塞渲染的资源，它们竟然让渲染增加了一秒钟？这看起来不是很好。

我们已经按照书籍，文档，HTML标准完成了所有工作，为什么Lighthouse还是会告诉我这样不对呢？

让我们来讨论下如何让字体样式文件成为非渲染阻塞资源，并且探讨一种不仅让Lighthouse满意，还要解决加载字体时通常会出现糟糕的无样式文本闪烁(FOUT)问题。我们将使用原生的HTML，CSS和JavaScript来完成这些工作，因此我们可以在任何技术栈中使用它们。另外我们还将介绍下Gatsby的实现以及一个由本人开发的简单、开箱即用的插件。

什么是渲染阻塞字体

浏览器加载网页时，会从DOM（HTML的一个对象模型）和CSSOM（所有css选择器的映射）中生成渲染树。渲染树是关键渲染路径中的一部分，关键渲染路径代表了浏览器在渲染页面中的每个步骤。浏览器为了渲染一个页面，需要加载并解析HTML文档以及链接到该HTML中的每个CSS文件。

下面是一个非常典型的直接从谷歌字体样式表：

加载字体样式表和字体文件时阻塞了关键渲染路径

对于普通用户来说网站最重要的部分是什么？当然是内容了。因此在页面加载过程中我们必须尽快将内容呈现给用户。为此，关键渲染路径必须精简到只剩下关键资源(例如HTML和关键的CSS)，其余的内容将在页面渲染完成后加载，包括字体。

如果一个用户正在较差的网络环境下浏览未经过优化的页面，坐在空白的屏幕前等待字体文件和其他关键资源载入完成将会使他非常恼火。除非该用户非常有耐心，否则他很可能会以为是页面根本没有开始加载，直接放弃等待，关闭窗口。

然而，如果非关键资源的渲染被推迟，内容尽可能快地被呈现了出来，用户将能够浏览页面并且忽略任何缺少的表现样式(比如字体)——当然，如果字体并不是内容的一部分的话。

（编辑：淮南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!