CSS性能优化

绘制未设置样式的页面，然后在解析样式后重新绘制，这将是一种糟糕的用户体验。因此，CSS 是渲染阻塞，除非浏览器知道当前不需要 CSS。一旦下载了 CSS 并构建了 CSS 对象模型，浏览器就可以绘制页面。浏览器遵循特定的渲染路径：绘制仅在布局后发生，而布局是在创建渲染树后发生的，而渲染树又需要 DOM 树和 CSSOM 树。要优化 CSSOM 构造，请删除不必要的样式，缩小、压缩和缓存它，并将页面加载时不需要的 CSS 拆分为其他文件，以减少 CSS 渲染阻塞。

优化渲染块

CSS 可以通过媒体查询将样式范围扩展到特定条件。媒体查询对于快速响应的 web 设计非常重要，可以帮助我们优化关键的渲染路径。浏览器会阻止渲染，直到解析所有这些样式，但不会阻止对其知道不会使用的样式（例如打印样式表）的渲染。通过基于媒体查询将CSS拆分为多个文件，可以防止在下载未使用的 CSS 时出现渲染阻塞。要创建非阻塞 CSS 链接，请将未立即使用的样式（如打印样式）移动到单独的文件中，在 HTML 标记中添加一个链接，并添加一个媒体查询，在本例中表示它是一个打印样式表。

<link rel="stylesheet" href="styles.css"> <!-- blocking -->
<link rel="stylesheet" href="print.css" media="print"> <!-- not blocking -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens -->

默认情况下，浏览器假设每个指定的样式表都是渲染块。通过在媒体查询中添加属性，告诉浏览器何时应用样式表。当浏览器看到样式表时，它知道它只需要将其应用于特定场景，它仍会下载样式表，但不会渲染块。通过将CSS分离为多个文件，在本例中，主渲染块文件要小得多，从而减少了渲染被阻塞的时间。media styles.CSS

在GPU上设置动画

浏览器经过优化，可以处理 CSS 动画，并且可以很好地处理不触发回流（因此也可以重新绘制）的动画属性。为了提高性能，可以将正在设置动画的节点从主线程移动到 GPU 上。导致合成的属性包括3D变换（transform:translateZ()、rotate3d()等）、animating transform 和 opacity、 position: fixed，will-change 和 filter。一些元素，包括<video>, <canvas> 和 <iframe>，也在它们自己的层上。当元素升级为层（也称为合成层）时，将在 GPU 中对变换属性设置动画，从而提高性能，尤其是在移动设备上。

will-change 属性

CSS 的 will-change 属性告知浏览器元素的预期更改方式。浏览器可能会在实际更改元素之前进行优化。这些类型的优化可以通过在实际需要之前进行潜在的昂贵工作来提高页面的响应能力。

will-change: opacity, transform;

注：will-change 旨在作为解决现有性能问题的最后手段。它不应用于预测性能问题。

font-display 属性

应用于 @font-face 规则，字体显示属性定义了浏览器加载和显示字体文件的方式，允许在加载字体或无法加载字体时，文本以回退字体显示。这通过使文本可见而不是空白屏幕来提高性能，取舍是闪烁未设置样式的文本。

@font-face {
  font-family: someFont;
  src: url(/path/to/fonts/someFont.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}