CSS performance optimization

这篇翻译不完整。请帮忙从英语翻译这篇文章

草案
本页尚未完工.

绘制一个无样式的页面,然后在样式解析之后重绘的用户体验是很糟糕的。由于这个原因,CSS 是阻塞渲染的,除非浏览器知道当前不再需要 CSS。浏览器会在下载 CSS 和构建 CSS 对象模型之后绘制页面。浏览器遵循特定的渲染路径:当渲染树创建后,绘制只会在布局之后发生,同时需要 DOM 和 CSSOM 树。为了优化 CSSOM 构造,移除不必要的样式,缩小,压缩并缓存它,并将页面加载时不需要的CSS拆分为其他文件以减少CSS渲染阻塞。

阻塞渲染优化

CSS 可以使用媒体查询将样式范围限定为特定条件。媒体查询对于响应式 Web 设计非常重要,可以帮助我们优化关键渲染路径。浏览器会阻塞渲染知道它解析完全部的样式,但不会阻塞渲染它知道不会使用的样式,例如打印样式表。通过媒体查询可以将 CSS 拆分为多个文件,可以防止在下载未使用 CSS 样式时阻塞渲染。为了创建非阻塞 CSS 链接,将不会立即使用的样式(例如打印样式)移动到单独的文件中,将 <link> 添加到 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 -->

默认情况下,浏览器假设每个指定的样式表都是阻塞渲染的。在应用样式表时,通过向 media query 添加 media 属性来告诉浏览器。当浏览器看到一个它知道只会用于特定场景的样式表时,它仍会下载样式,但不会阻塞渲染。通过将 CSS 分成多个文件,主要的 阻塞渲染 文件(本例中为 styles.css),是非常小的,从而减少了渲染被阻塞的时间。

GPU 上制作动画

浏览器经过处理 CSS 动画优化,能很好的处理不会触发重排(也包括重绘)的动画属性。为了提高性能,将动画节点移出主线程并移到 GPU 上。将导致合成的属性包括 3D transforms (transform: translateZ(), rotate3d(),etc.),animating transform 和 opacity, position: fixedwill-change,和 filter。一些元素,包括 <video>, <canvas><iframe>,也位于各自的图层上。当一个元素被提升为图层时,也称为合成图层,animating transform properties 在 GPU 中完成,从而提高性能,尤其是在移动设备上。

will-change 属性

CSS will-change 属性告诉浏览器元素的哪些属性需要修改,使浏览器能够在元素实际更改之前设置优化,通过在需要前执行耗时的工作以提升性能。

will-change: opacity, transform;

font-display 属性

根据 @font-face 规则,font-display 属性定义了浏览器如何加载和显示字体文件,允许文本在字体加载或加载失败时显示回退字体。可以通过依靠折中无样式文本闪现使文本可见替代白屏来提高性能。

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

文档标签和贡献者

此页面的贡献者: Syaki
最后编辑者: Syaki,