仅使用CSS就可以提高页面渲染速度的4个技巧

本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。

1. Content-visibility

一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。

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

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

在这个例子中，在页面中加入

content-visibility

后，渲染时间下降到150ms，这是6倍以上的性能提升。

content-visibility 的限制

• 此功能仍处于试验阶段。 截至目前，Firefox（PC和Android版本）、IE（我认为他们没有计划在IE中添加这个功能）和，Safari（Mac和iOS）不支持内容可见性。

• 与滚动条行为有关的问题。 由于元素的初始渲染高度为0px，每当你向下滚动时，这些元素就会进入屏幕。实际内容会被渲染，元素的高度也会相应更新。这将使滚动条的行为以一种非预期的方式进行。

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

2. Will-change 属性

通过will-change CSS属性，我们可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。

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

// InHTML
<divclass="animating-elememt">
AnimatingChildelements
</div>

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

什么时候不用will-change

• 使用

  will-change

  表示该元素在未来会发生变化。 因此，如果你试图将

  will-change

  和动画同时使用，它将不会给你带来优化。因此，建议在父元素上使用

  will-change

  ，在子元素上使用动画。

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

• 不要使用非动画元素。 当你在一个元素上使用

  will-change

  时，浏览器会尝试通过将元素移动到一个新的图层并将转换工作交给GPU来优化它。如果您没有任何要转换的内容，则会导致资源浪费。

3.减少渲染阻止时间

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

<linkrel="stylesheet"href="styles.css">

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

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

关于

@import

的关键事实是，它是一个阻塞调用，因为它必须通过网络请求来获取文件，解析文件，并将其包含在样式表中。如果我们在样式表中嵌套了

@import

，就会妨碍渲染性能。

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

总结

最重要的是，我们不需要写一条JavaScript语句就能获得所有的性能。

来源：https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
作者：Rumesh Eranga Hapuarachchi