仅使用CSS提高页面渲染速度

用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

内容可见性（content-visibility）

一般来说，大多数Web应用都有复杂的UI元素，而且有的内容会在设备可视区域之外（内容超出了用户浏览器可视区域），比如下图中红色区域就在手机设备屏幕可视区域之外：

在这种场合下，我们可以使用CSS的content-visibility来跳过屏幕外的内容渲染。也就是说，如果你有大量的离屏内容（Off-screen Content），这将会大幅减少页面渲染时间。

这个功能是CSS新增的特性，隶属于 W3C 的 CSS Containment Module Level 2 模块。也是对提高渲染性能影响最大的功能之一。content-visibility可以接受visible、auto和hidden三个属性值，但我们可以在一个元素上使用content-visibility:auto来直接的提升页面的渲染性能。

假设我们有一个像下面的页面，整个页面有个卡片列表，大约有375张，大约在屏幕可视区域能显示12张卡片。正如下图所示，渲染这个页面浏览器用时大约1037ms：

你可以给所有卡片添加content-visibility：

.card {
    content-visibility: auto;
}

所有卡片加入content-visibility样式之后，页面的渲染时间下降到150ms，差不多提高了六倍的渲染性能：

正如你所看到的，content-visibility非常强大，提高页面渲染非常有用。换然话说，有了CSS的content-visibility属性，影响浏览器的渲染过程就变得更加容易。本质上，这个属性 改变了一个元素的可见性，并管理其渲染状态。

content-visibility有点类似于CSS的display和visibility属性，然而，content-visibility的操作方式与这些属性不同。

content-visibility的关键能力是，它允许我们推迟我们选择的HTML元素渲染。 默认情况之下，浏览器会渲染DOM树内所有可以被用户查看的元素。用户可以看到视窗可视区域中所有元素，并通过滚动查看页面内其他元素。一次渲染所有的元素（包括视窗可视区域之外不可见的HTML元素）可以让浏览器正确计算页面的尺寸，同时保持整个页面的布局和滚动条的一致性。

如果浏览器不渲染页面内的一些元素，滚动将是一场噩梦，因为无法正确计算页面高度。这是因为，content-visibility会将分配给它的元素的高度（height）视为0，浏览器在渲染之前会将这个元素的高度变为0，从而使我们的页面高度和滚动变得混乱。但如果已经为元素或其子元素显式设置了高度，那这种行为就会被覆盖。如果你的元素中没显式设置高度，并且因为显式设置height可能会带来一定的副作用而没设置，那么我们可以使用contain-intrinsic-size来确保元素的正确渲染，同时也保留延迟渲染的好处。

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

这也意味着它将像有一个“固有尺寸”（Intrinsic-size）的单一子元素一样布局，确保你没设置尺寸的div（示例中的.card）仍然占据空间。contain-intrinsic-size作为一个占位符尺寸来替代渲染内容。

虽然contain-intrinsic-size能让元素有一个占位空间，但如果有大量的元素都设置了content-visibility: auto，滚动条仍然会有较小的问题。

content-visibility提供的另外两个值visible和hidden可以让我们实现像元素的显式和隐藏，类似于display的none和非none值的切换：

在这种情况下，content-visibility可以提高频繁显示或隐藏的元素的渲染性能，例如模态框的显示和隐藏。content-visibility可以提供这种性能提升，这要归功于其隐藏值（hidden）的功能与其他值的不同：

• display: none：隐藏元素并破坏其渲染状态。 这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵
• visibility: hidden：隐藏元素并保持其渲染状态。 这并不能真正从文档中删除该元素，因为它（及其子树）仍占据页面上的几何空间，并且仍然可以单击。 它也可以在需要时随时更新渲染状态，即使隐藏也是如此
• content-visibility: hidden：隐藏元素并保留其渲染状态。这意味着该元素隐藏时行为和display: none一样，但再次显示它的成本要低得多

content-visibility属性的扩展阅读：

• content-visibility: the new CSS property that boosts your rendering performance
• More on content-visibility

合理使用will-change

CSS渲染器（CSS Renderer）在渲染CSS样式之前需要一个准备过程，因为有些CSS属性需要CSS渲染器事先做很多准备才能实现渲染。这就很容易导致页面出现卡顿，给用户带来不好的体验。

比如Web上的动效，通常情况之下，Web动画（在动的元素）是和其他元素一起定期渲染的，以往在动画开发时，会使用CSS的3D变换（transform中的translate3d()或translateZ()）来开启GPU加速，让动画变得更流畅，但这样做是一种黑魔法，会将元素和它的上下文提到另一个“层”，独立于其他元素被渲染。可这种将元素提取到一个新层，相对来说代价也是昂贵的，这可能会使transform动画延迟几百毫秒。

不过，现在我可以不使用transform这样的Hack手段来开启GPU加速，可以直接使用CSS的will-change属性，该属性可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。也就是说，will-change是一个UA提示，它不会对你使用它的元素产生任何样式上的影响。但值得注意的是，如果创建了新的层叠上下文，它可以产生外观效果。

比如下面这样的一个动画示例：

<!-- HTML -->
<div class="animate"></div>

/* CSS */
.animate {
    will-change: opacity
}

浏览器渲染上面的代码时，浏览器将为