消除渲染阻塞资源（灯塔）答案

【问题标题】：Eliminate render-blocking resources ( lighthouse)消除渲染阻塞资源（灯塔）
【发布时间】：2020-02-10 18:36:12
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <title>BookNotes</title>

    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta httpEquiv="Content-Language" content="en" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我有这个 html 页面，我想使用 Roboto 字体样式表，但在我使用它的方式上，Lighthouse 给了我这个警告：

优化它的最佳方法是什么？我读过我可以使用defer 或async 属性在渲染后以异步方式加载它，但如果我在渲染后加载它，它不会为我的字体应用样式等。将非常感谢您的帮助。如果您需要更多信息，请告诉我。

【问题讨论】：

标签： html css reactjs lighthouse

【解决方案1】：

我找到了更好的解决方案：

 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      media="print"
      onload="this.media='all'"
    />

效果很好

【讨论】：

这有点骇人听闻，而且它并非一成不变地适用于所有浏览器或新版本的浏览器。使用风险自负。

【解决方案2】：

就个人而言，我认为处理这个问题的最好方法是异步加载字体。但是，这可能会导致字体闪烁，这意味着字体首先是默认字体，然后会重新呈现为新加载的字体。为了解决这个问题，您可以隐藏页面的内容，直到字体被加载，并通过回调显示它。你可以看看webfontloader。当有人禁用 JS 时，您还必须对极少数情况进行后备。

JavaScript

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Roboto']
  }
});
document.querySelector('html').classList.remove('no-js')

CSS

html {opacity: 0;}
html .wf-active, html.wf-inactive, html.no-js {opacity: 1;}

HTML

<html lang="en" class="no-js">

【讨论】：