font-display之为何浏览器加载文本渲染很慢？？

现象

当浏览器加载访问网页的时候，有时会看到图片都加载出来，文本竟然还没显示出来。

到底是什么原因使得渲染很慢呢？？

出现这种现象，肯定先排除网速原因了，因为图片都正常加载出来了。那问题极大可能的出现在字体库的加载问题上了，而且这种现象都是引用了线上字体库，字体库又很大，加载很慢，导致字体渲染很慢。大方向就是这个了。

了解一下web Fonts加载过程

浏览器加载 Web Fonts 时按顺序会有三个时期

• 阻塞期（Block Period）。在此期间字体没有加载完成，浏览器界面字体不可见，在此期间字体加载完了才正常显示文本。阻塞期有超时限制，一般为3s。

• 交换期（Swap Period）。在此期间字体没有加载完成，浏览器会优先使用font-family中后面的字体进行文本渲染显示文本，等到字体加载完成，才会使用字体加载的字体进行文本渲染显示文本。

• 失败期（Failure Period）。如果字体加载失败，浏览器会使用备用字体进行文本渲染显示文本。

font-display介绍

我们通过配置font-display来控制Web Fonts加载周期长短。

• auto。默认值，表示字体过程由浏览器自行决定，和设置block时差不多。

• block。在字体加载完成前，文本不显示，处于阻塞期，当字体加载完成后进入交换期，用加载的字体进行文本渲染显示。如果加载超时，就会直接进入交换期，用备用字体进行文本渲染显示。

• swap。基本上没有阻塞期，直接进入交换期。

• fallback。阻塞期很短（大约100毫秒），100毫秒后进入交换期，交换期内如果加载成功就会替换加载的字体进行文本渲染显示，超过3s还没加载完成，直接进入失败期，用备用字体进行文本渲染显示，不在管加载的字体是否加载完成还是失败。

• optional。与fallback类似，但是没有交换期，阻塞期100毫秒内没加载完成，就会放弃该字体进行文本渲染显示，直接使用备用字体进行文本渲染显示，这种情况，就是不在乎在线字体，如果加载快就用，慢就放弃。

结论

浏览器加载文本渲染的慢是因为引用的线上字体库，font-display使用默认值auto，解决这个问题，我只需配置font-display: swap;。

说到这里我们也不能以为就结束了，还需要考虑一下我们项目需要兼容的浏览器的版本。

不支持font-display怎么办呢？

我想到是通过javascript脚本去监听字体加载完成后，在补充覆盖font-family样式：

这里使用CSS Font Loading API，当然不支持IE了，兼容性点击这里

body {
    font-family: sans-serif;
}

.my-font {
    font-family: "myfont";
}

if ("fontDisplay" in document.body.style === false) {
    if("fonts" in document) {
        // Define a FontFace
        const font = new FontFace("myfont", "url(myfont.woff)");

        // Add to the document.fonts (FontFaceSet)
        document.fonts.add(font);

        // Load the font
        font.load();

        // Wait until the fonts are all loaded
        document.fonts.ready.then(() => {
          // Use the font to render text
          document.body.classList.add('my-font')
        });
    }
}