如何消除webfont.js的渲染阻塞问题（Lighthouse检测）

嘿，我来帮你搞定这个webfont.js阻塞页面渲染的问题！其实核心问题不在于你用CDN还是本地的webfont.js，而是脚本的加载时机和方式不对。下面给你几个实用的解决办法：

1. 给script标签添加async或defer属性 #

你现在把webfont.js的脚本放在<head>里，默认是同步加载的，浏览器会停下来等待脚本下载并执行完才继续解析DOM，这就导致了渲染阻塞。给脚本加上async或者defer就能让它异步加载，不阻塞渲染：

• defer：脚本会在后台下载，等整个DOM解析完成后再执行，而且会保持脚本的执行顺序（适合依赖顺序的场景）
• async：脚本下载完成后立即执行，不保证顺序（如果你的webfont初始化不依赖其他脚本，也可以用）

修改你的index.html代码：

<script src="../node_modules/webfontloader/src/core/webfont.js" defer></script>
<script defer>
  WebFont.load({
    google: {
      families: ['Material+Icons']
    }
  });
</script>

2. 把脚本移到<body>末尾 #

另一种简单的方式是把webfont相关的脚本放到<body>的最后面，也就是<app-root>标签之后。这样浏览器会先解析完页面的所有DOM内容，再去加载和执行脚本，完全不会阻塞初始渲染：

修改后的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta charset="UTF-8">
  <title>My App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/logo.ico">
</head>
<body>
  <app-root></app-root>
  <script src="../node_modules/webfontloader/src/core/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ['Material+Icons']
      }
    });
  </script>
</body>
</html>

3. 配合font-display: swap提升体验 #

为了让字体加载过程中的用户体验更好，你可以在CSS里给Material Icons设置font-display: swap。这样浏览器会先显示系统默认的替代字体，等Material Icons加载完成后再替换成图标字体，避免页面出现空白或者闪烁：

.material-icons {
  font-family: 'Material Icons';
  font-display: swap;
}

这几个方法结合起来用，既能解决webfont.js的渲染阻塞问题，又能保证图标字体的加载体验～

内容的提问来源于stack exchange，提问作者user6680