如何只使用CSS提高页面渲染速度

做者 | Rumesh Eranga Hapuarachchicss

译者 | 张健欣

策划 | 田晓旭

用户喜欢快速的 Web 应用。他们指望页面加载速度快，运行流畅。若是滚动时出现动画中断或延迟，用户极可能就会离开你的网站。做为一名开发者，你能够作不少事情来提高用户体验。本文主要介绍你能够用来提高页面渲染速度的 4 个 CSS 技巧。前端

1. Content-visibility

通常来讲，大部分 Web 应用都有复杂的 UI 元素，而且它的扩展超出了用户在浏览器视图中所能看到的范围。在这种状况下，咱们可使用content-visibility来跳过渲染屏幕以外的内容。若是你有大量屏幕以外的内容的话，这会大大减小页面渲染时间。windows

这个功能是最新添加的功能之一，并且它是提高渲染性能最有影响力的功能之一。content-visibility接受几个值，咱们能够在一个元素上使用content-visibility: auto;来当即得到性能提高。浏览器

咱们能够看下面这个页面，包含不少显示不一样信息的卡片。虽然屏幕能显示大约 12 个卡片，但列表中有差很少 375 个卡片。如你所见，浏览器花费 1037ms 来渲染这个页面。前端框架

通常 HTML 页面微信

下一步，你能够向全部的卡片中加入content-visibility。网络

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

使用 content-visibility框架

如你所见，content-visibility 的功能很强大，对于改善页面渲染时间很是有用。根据咱们目前为止讨论的内容，你必定在想它是针对页面渲染的灵丹妙药。布局

content-visibility 的限制

然而，也有一些领域 content-visibility 不适合。我想强调 2 点供你考虑。

这个功能仍是实验性的。目前，Firefox（PC 和 Android 版本）、Internet Explorer (我不认为他们计划向 IE 中添加这个功能) 以及 Safari (Mac 和 iOS) 不支持 content-visibility。

与滚动条行为相关的问题。因为元素最初渲染的高度是 0px，当你向下滚动时，这些元素会进入屏幕。实际的内容会被渲染，这个元素的高度会被相应地更新。这会使滚动条出现预料以外的行为。

使用 content-visibility 的滚动行为

为了修复这个滚动条问题，你可使用另外一个 CSS 属性， contain-intrinsic-size。它指定了一个元素的天然大小。所以，这个元素会用指定的高度渲染，而不是 0px。

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

然而，在实验时，我发现即便使用containt-intrinsic-size，若是咱们有不少元素都使用content-visibility且设置为auto，你仍然会有微小的滚动条问题。所以，个人建议是规划你的布局，将它分解为几个部分，而后在那几个部分上使用 content-visibility 来获取更好的滚动条行为。

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属性，并优化将来与不透明度 opacity 相关的变动。

根据 Maximillian Laumeister 所作的性能基准测试，你能够看到他只改变了一行代码就得到了超过 120FPS 的渲染速度，而最初的渲染速度大约是 50FPS。

不使用 will-change；图片来源：Maximilian

使用 will-change；图片来源：Maximilian

何时不要用 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 对象模型（CSS Object Model，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");

使用 imports 的瀑布图

与其使用@import，咱们可使用多个连接 link 实现相同的功能且具备更好的性能，由于它容许并行下载样式表。

使用连接的瀑布图

结论

除了本文咱们讨论的 4 个方面，还有一些其它的方法咱们可使用 CSS 来提升 Web 页面的性能。CSS 最新的特性之一，content-visibility,在将来几年看起来颇有前景，由于它能够在页面渲染方面带来数倍的性能提高。

最重要的是，咱们不用编写一句 JavaScript 代码就能够得到全部这些性能提高。

我相信，你能够结合以上特性，为最终用户构建性能更好的 Web 应用。我但愿这篇文章是有用的，若是你知道任何能够提高 Web 应用性能的 CSS 技巧，请在评论中留言。谢谢！

最后

“在看和转发” 就是最大的支持

本文分享自微信公众号 - 前端壹栈（Ecmscript）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。