起源：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利用的性能，请在上面的评论中提及。谢谢大家。