<!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 属性，在渲染后以异步方式加载它，但如果我在渲染后加载它，它将不适用我的字体样式等。将非常感谢您的帮助。如果您需要更多信息，请告诉我。
最佳答案
就我个人而言，我认为处理此问题的最佳方法是异步加载字体。但是，这可能会导致字体闪烁，这意味着字体首先是默认字体，然后重新呈现为新加载的字体。为了解决这个问题，您可以隐藏页面的内容，直到加载字体，然后通过回调显示它。您可以看一下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">
关于html - 消除渲染阻塞资源(灯塔)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58371640/