仅使用CSS就能够提升页面渲染速度的4个技巧

来源： https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/

用户喜欢快速的网络应用，他们但愿页面加载速度快，功能流畅。若是在滚动时有破损的动画或滞后，用户颇有可能会离开你的网站。做为一名开发者，你能够作不少事情来改善用户体验。本文将重点介绍4个能够用来提升页面渲染速度的CSS技巧。

1. Content-visibility

通常来讲，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种状况下，咱们可使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。若是你有大量的离屏内容，这将大大减小页面渲染时间。

这个功能是最新增长的功能之一，也是对提升渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但咱们能够在元素上使用 content-visibility: auto; 来得到直接的性能提高。

让咱们考虑一下下面的页面，其中包含许多不一样信息的卡片。虽然大约有12张卡适合屏幕，但列表中大约有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面。

下一步，您能够向全部卡添加 content-visibility 。

在这个例子中，在页面中加入 content-visibility 后，渲染时间降低到150ms，这是6倍以上的性能提高。

正如你所看到的，内容可见性是至关强大的，对提升页面渲染时间很是有用。根据咱们目前所讨论的东西，你必定是把它当成了页面渲染的银弹。

content-visibility 的限制

然而，有几个领域的内容可视性不佳。我想强调两点，供你们参考。

• 此功能仍处于试验阶段。截至目前，Firefox（PC和Android版本）、IE（我认为他们没有计划在IE中添加这个功能）和，Safari（Mac和iOS）不支持内容可见性。
• 与滚动条行为有关的问题。因为元素的初始渲染高度为0px，每当你向下滚动时，这些元素就会进入屏幕。实际内容会被渲染，元素的高度也会相应更新。这将使滚动条的行为以一种非预期的方式进行。

为了解决滚动条的问题，你可使用另外一个叫作 contain-intrinsic-size 的 CSS 属性。它指定了一个元素的天然大小，所以，元素将以给定的高度而不是0px呈现。

.element{
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

然而，在实验时，我注意到，即便使用 conta-intrinsic-size，若是咱们有大量的元素， content-visibility 设置为 auto ，你仍然会有较小的滚动条问题。

所以，个人建议是规划你的布局，将其分解成几个部分，而后在这些部分上使用内容可见性，以得到更好的滚动条行为。

2. Will-change 属性

浏览器上的动画并非一件新鲜事。一般状况下，这些动画是和其余元素一块儿按期渲染的。不过，如今浏览器可使用GPU来优化其中的一些动画操做。

经过will-change CSS属性，咱们能够代表元素将修改特定的属性，让浏览器事先进行必要的优化。

下面发生的事情是，浏览器将为该元素建立一个单独的层。以后，它将该元素的渲染与其余优化一块儿委托给GPU。这将使动画更加流畅，由于GPU加速接管了动画的渲染。

考虑如下CSS类：

// In stylesheet
.animating-element {
  will-change: opacity;
}

// In HTML
<div class="animating-elememt">
  Animating Child elements
</div>

当在浏览器中渲染上述片断时，它将识别 will-change 属性并优化将来与不透明度相关的变化。

根据Maximillian Laumeister所作的性能基准，能够看到他经过这个单行的改变得到了超过120FPS的渲染速度，而最初的渲染速度大概在50FPS。

何时不是用will-change

虽然 will-change 的目的是为了提升性能，但若是你滥用它，它也会下降Web应用的性能。

• 使用 will-change 表示该元素在将来会发生变化。所以，若是你试图将 will-change 和动画同时使用，它将不会给你带来优化。所以，建议在父元素上使用 will-change ，在子元素上使用动画。

  .my-class{
    will-change: opacity;
  }
  .child-class{
    transition: opacity 1s ease-in-out;
  }

• 不要使用非动画元素。当你在一个元素上使用 will-change 时，浏览器会尝试经过将元素移动到一个新的图层并将转换工做交给GPU来优化它。若是您没有任何要转换的内容，则会致使资源浪费。

最后须要注意的是，建议在完成全部动画后，将元素的 will-change 删除。

3.减小渲染阻止时间

今天，许多Web应用必须知足多种形式的需求，包括PC、平板电脑和手机等。为了完成这种响应式的特性，咱们必须根据媒体尺寸编写新的样式。当涉及页面渲染时，它没法启动渲染阶段，直到 CSS对象模型（CSSOM）已准备就绪。根据你的Web应用，你可能会有一个大的样式表来知足全部设备的形式因素。

可是，假设咱们根据表单因素将其拆分为多个样式表。在这种状况下，咱们能够只让主CSS文件阻塞关键路径，并以高优先级下载它，而让其余样式表以低优先级方式下载。

<link rel="stylesheet" href="styles.css">

将其分解为多个样式表后：

<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

如您所见，根据样式因素分解样式表能够减小渲染阻止时间。

4.避免@import包含多个样式表

经过 @import，咱们能够在另外一个样式表中包含一个样式表。当咱们在处理一个大型项目时，使用 @import 可使代码更加简洁。

关于 @import 的关键事实是，它是一个阻塞调用，由于它必须经过网络请求来获取文件，解析文件，并将其包含在样式表中。若是咱们在样式表中嵌套了 @import，就会妨碍渲染性能。

# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");

与使用 @import 相比，咱们能够经过多个 link 来实现一样的功能，但性能要好得多，由于它容许咱们并行加载样式表。

总结

除了咱们在本文中讨论的4个方面，咱们还有一些其余的方法可使用CSS来提升网页的性能。CSS最近的一个特性： content-visibility，在将来的几年里看起来是如此的有前途，由于它给页面渲染带来了数倍的性能提高。

最重要的是，咱们不须要写一条JavaScript语句就能得到全部的性能。

我相信你能够结合以上的一些功能，为终端用户构建性能更好的Web应用。但愿这篇文章对你有用，若是你知道什么CSS技巧能够提升Web应用的性能，请在下面的评论中说起。谢谢你们。