第 004 期 提高页面渲染速度的 3 个 CSS 技巧

提到提高页面渲染速度，我们第一想到的是优化 JavaScript。其实通过优化 CSS 也能提高页面渲染速度。

优化方案

1. 延时渲染屏幕外的内容 - content-visibility: auto

很长的页面会有大量的内容在屏幕外。如果只渲染屏幕内的内容，屏幕外的内容在出现时才渲染，能大大的节约渲染时间。

CSS Containment Module Level 2 模块 新增了 content-visibility 属性。这个属性能推迟选择的HTML元素。

当有大量离屏内容时，需要延时渲染屏幕外的内容，只需在元素上使用 content-visibility: auto。

在屏幕外被延迟渲染的元素，在浏览器中，高度会变成 0。当发生滚动时，元素出现，被渲染后高度也会相应更新，此时滚动条行为会以非预期方式进行。解决这个问题，可以设置元素未渲染时的高度: contain-intrinsic-size: 未渲染时的高度。代码如下：

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

注意：如果元素或其子元素显式设置了高度，会被覆盖 contain-intrinsic-size 的值。

局限性：

• 此功能仍处于试验阶段，截至目前，Firefox，IE，Safari 不支持。

2. 提升动画渲染的性能 - will-change

开启 GPU 加速，能让动画变得更流畅。元素的样式上设置 will-change 后，会开启 GPU 加速。will-change 的值发生变化后，GPU 会优化该元素的渲染。写法:

.transition {
  will-change: opacity;
}

局限性：

• 应作为“最后的手段”，避免过早优化。
• 应在父元素上使用 will-change，在子元素上使用动画。
• 有节制的使用，当元素变化之前和变化之后，通过脚本切换 will-change 的值，并在动画完成后，将元素的 will-change 删除。

3. 让滚动更流畅 - scroll-behavior

设置 scroll-behavior 能让滚动更流畅。 scroll-behavior 接受的值:

可接受属性值：

• auto： 滚动框立即滚动
• smooth： 通过定义事件函数来实现平稳滚动

效果对比:

参考文档

• 使用CSS就可以提高页面渲染速度的4个技巧
• 仅使用CSS提高页面渲染速度
• MDN：will-change