使用CSS就可以提高页面渲染速度的技巧有哪些

本篇内容介绍了“使用CSS就可以提高页面渲染速度的技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

康乐网站建设公司创新互联,康乐网站设计制作，有大型网站制作公司丰富经验。已为康乐上1000+提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的康乐做网站的公司定做！

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    Animating Child elements