blob: e122e198beb4d0798c6586c717ba666c55c0548e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
---
title: CSS performance optimization
slug: Learn/Performance/CSS
translation_of: Learn/Performance/CSS
---
<p>{{draft}}</p>
<p>页面在样式没有渲染完毕的情况下被绘制，在样式渲染完毕后又被刷新，这大概是很糟糕的用户体验。因此，除非浏览器知道当前不需要 该 CSS，否则 该 CSS将阻止渲染。浏览器只会在下载 CSS 和构建 CSSOM之后绘制页面。浏览器遵循特定的渲染路径：绘制 paint 仅在布局 layout之后进行，布局 layout 则在创建渲染树 render tree 之后进行，创建渲染树则需要在DOM和CSSOM 树解析完成后进行。为了优化CSSOM的构造，请删除不必要的样式，对 CSS 进行最小化，压缩和缓存，并将页面加载时不需要的CSS拆分为其他文件，以减少CSS渲染阻塞。</p>
<h3 id="阻塞渲染优化">阻塞渲染优化</h3>
<p>CSS 可以使用媒体查询将样式应用在特定条件下。媒体查询对于响应式 Web 设计非常重要，可以帮助我们优化关键渲染路径。浏览器会阻塞渲染，直到它解析完全部的样式，但不会阻塞渲染它认为不会使用的样式，例如打印样式表。通过基于媒体查询将CSS分成多个文件，可以防止在下载未使用的CSS期间阻止渲染。为了创建非阻塞 CSS 链接，将不会立即使用的样式（例如打印样式）移动到单独的文件中，将 <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code> 添加到 HTML 中，并添加媒体查询，在这种情况下说明它是打印样式表。</p>
<pre class="brush: 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 --></pre>
<p>默认情况下，浏览器假设每个指定的样式表都是阻塞渲染的。通过添加 media属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。通过将 CSS 分成多个文件，主要的 阻塞渲染 文件（本例中为 <code>styles.css</code>）的大小变得更小，从而减少了渲染被阻塞的时间。</p>
<h3 id="在GPU_上呈现动画">在GPU 上呈现动画</h3>
<p>浏览器针对处理CSS动画和不会很好地触发重排（因此也导致重新绘制）的动画属性进行了优化。为了提高性能，可以将被动画化的节点从主线程移到GPU上。将导致合成的属性包括 3D transforms (<code><a href="/en-US/docs/Web/CSS/transform">transform: translateZ()</a></code>, <code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code>，etc.)，animating transform 和 <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, <code><a href="/en-US/docs/Web/CSS/position">position: fixed</a></code>，<code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>，和 <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code>。一些元素，例如 <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>，也位于各自的图层上。 将元素提升为图层（也称为合成）时，动画转换属性将在GPU中完成，从而改善性能，尤其是在移动设备上。</p>
<h3 id="will-change_属性"><code>will-change</code> 属性</h3>
<p>CSS <a href="/en-US/docs/Web/CSS/will-change"><code>will-change</code></a> 属性告诉浏览器元素的哪些属性需要修改，使浏览器能够在元素实际更改之前设置优化，通过在实际更改前执行耗时的工作以提升性能。</p>
<pre class="brush: css">will-change: opacity, transform;</pre>
<h3 id="font-display_属性"><code>font-display</code> 属性</h3>
<p>根据 <a href="/en-US/docs/Web/CSS/@font-face">@font-face</a> 规则，<a href="/en-US/docs/Web/CSS/@font-face/font-display">font-display</a> 属性定义了浏览器如何加载和显示字体文件，允许文本在字体加载或加载失败时显示回退字体。可以通过依靠折中无样式文本闪现使文本可见替代白屏来提高性能。</p>
<pre class="brush: css">@font-face {
font-family: someFont;
src: url(/path/to/fonts/someFont.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: fallback;
}</pre>
<h3 id="contain_属性"><code>contain</code> 属性</h3>
<p>CSS的 <code>contain</code>属性允许作者指示元素及其内容尽可能独立于文档树的其余部分。 这允许浏览器针对DOM的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。</p>
|
