如何使用CSS提高页面渲染速度

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197120.html

1. 内容可见性（content-visibility）
2. 合理使用 will-change
3. 让元素及其内容尽可能独立于文档树的其余部分（contain）
4. 使用 font-display 解决由于字体造成的布局偏移（FOUT）
5. scroll-behavior 让滚动更流畅
6. 开启 GPU 渲染动画
7. 减少渲染阻止时间
8. 避免@import 包含多个样式表
9. 注意动态修改自定义属性方式
10. 小结

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

内容可见性（content-visibility）

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

注意动态修改自定义属性方式

CSS 自定义属性又名 CSS 变量，该特性已经是非常成熟的特性了，可以在 Web 的开发中大胆的使用该特性：

:root { --color: red; }

button {
    color: var(--color);
}

在使用 CSS 自定义属性时，时常在root（根元素）上注册自定义属性，这种方式注册的自定义属性是个全局的自定义属性（全局变量），可以被所有嵌套的子元素继承。就上例而言，--color属性允许任何button样式将其作为变量使用。

熟悉 CSS 自定义属性的同学都知道，可以使用style.setProperty来重新设置已注册好的自定义属性的值。但在修改根自定义属性时，需要注意，因为它会影响 Web 的性能。早在 2017 年@Lisi Linhart 在《Performance of CSS Variables》中阐述过。

• 在使用 CSS 变量时，我们总是要注意我们的变量是在哪个范围内定义的，如果改变它，将影响许多子代，从而产生大量的样式重新计算。
• 结合 CSS 变量使用calc()是一个很好的方法，可以获得更多的灵活性，限制我们需要定义的变量数量。在不同的浏览器中测试calc()与 CSS 变量的结合，并没有发现任何大的性能问题。然而在一些浏览器中对一些单位的支持还是有限的，比如deg或ms，所以我们必须记住这一点。
• 如果我们比较一下在 JavaScript 中通过内联样式设置变量与setProperty方法的性能标志，浏览器之间有一些明显的差异。在 Safari 中通过内联样式设置属性的速度非常快，而在 Firefox 中则非常慢，所以使用setProperty设置变量是首选

有关于这方面的具体细节就不在这阐述了，如果你对这方面感兴趣的话，可以阅读下面这几篇文章：

• Performance of CSS Variables
• Control CSS loading with custom properties
• CSS Custom Properties performance in 2018
• Improving CSS Custom Properties performance

小结

可能很多人会说，5G 已到来，终端设备性能越来越好，网络环境也越来越强，Web 性能已不是问题了，但事实上在 Web 开发过程中总是难免碰到性能是的问题。而且我们为用户提供更流畅的体验也是我们必备技术之一。时至今日，优化 Web 性能的方式和手段很多，但在开发时注重每个细节，可以让我们把性能做得更好。正如文章中提到这些。

除了文章提到的这几个点，还有一些其他的方法可以使用 CSS 来提高网页的性能。当然，文章中提到的一些特性还没有得到所有浏览器支持，比如content-visibility、contain等，但在未来它们肯定能让页面渲染带来更快的渲染。另外，文章中提到的一些技巧并没有深入阐述，比如 CSS 的引用方式，CSS 的阻塞等。如果你对这方面感兴趣的话，可以继续观注后续的相关更新；如果你在这方面更好的建议或经验，欢迎在下面的评论中与我们分享。

作者：淘系前端团队
链接：点击这里
来源：掘金

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/