仅使用CSS提高页面呈现速度的4个技巧

用户喜欢快速的Web应用程序，他们希望页面能够快速加载并流畅运行。如果滚动时动画损坏或滞后，用户很可能会离开您的网站。作为开发人员，您可以做很多事情来改善用户体验。本文将重点介绍可用于提高页面呈现速度的4个CSS技巧。1.内容可见性通常，大多数Web应用程序都有复杂的UI元素，这些元素超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性来跳过屏幕外内容的渲染。如果你有很多屏幕外的内容，这将大大减少页面渲染时间。此功能是最新添加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然content-visibility接受多个值，但我们可以使用content-visibility:auto;在一个元素上立即提升性能。让我们考虑以下页面，其中包含许多具有不同信息的卡片。虽然屏幕上可以容纳大约12张卡片，但列表中大约有375张卡片。如您所见，浏览器用了1037毫秒来呈现页面。下一步，您可以为所有卡片添加内容可见性。在本例中，在页面中加入content-visibility后，渲染时间下降到150ms，性能提升超过6倍。如您所见，内容可见性非常强大，对于缩短页面呈现时间非常有用。从我们目前所讨论的内容来看，您一定将其视为页面呈现的灵丹妙药。内容可见性限制然而，有几个区域的内容可见性很差。我想强调两点，供大家参考。此功能仍处于试验阶段。截至目前，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-changeCSS属性，我们可以指示元素将修改特定属性，从而允许浏览器提前执行必要的优化。下面发生的是浏览器将为该元素创建一个单独的层。之后，它将对该元素的渲染以及其他优化委托给GPU。这将使动画更流畅，因为GPU加速接管了动画的渲染。考虑以下CSS类：//Instylesheet.animating-element{will-change:opacity;}//InHTMLAnimatingChildelements