使用 CSS 变量是否对网站性能有影响，我做了个实验

CSS 变量自 Chrome 49 (March 3, 2016) 版本开始支持。

如果你还不了解 CSS 变量，推荐阅读 CSS 变量教程- 阮一峰的网络日志[1]

到如今，几乎所有的主流浏览器都已经支持了该特性。当然，IE11 肯定是不支持的。

使用 CSS 变量，可以很容易的实现网站主题换肤等功能。它的性能怎么样呢，因为涉及到计算，在页面上大量的使用，会不会增加页面的渲染时间呢？

我做了一个简单的 benchmark 测试，创建 5000 个 CSS 变量，来看看它究竟会不会减慢页面的渲染速度。

测试环境

步骤

• 生成 5000 种颜色（Color）
• 创建 10000 个 HTML 节点
• 输出一份用静态的 CSS Class 改变节点颜色的 HTML 文件
• 输出一份用动态的 CSS 变量 改变节点颜色的 HTML 文件
• 在本地使用 node 启动 HTTP 服务，使用 Chrome 的 performance 工具分别测试文件 5 次

设备

• Linux, Google Chrome 版本 92.0.4515.159 (Official Build) (64-bit)
• 未登录 Google 账号，没有任何浏览器插件

测试工具

git clone git@github.com:fedek6/css-variables-benchmark.git
cd css-variables-benchmark
yarn
yarn build
yarn start:compiled [number of random colors] [reuse factor]

根据以上命令，会生成一个 bundle 的文件夹，里面有两个文件：static 和 dynamic 分别代表使用 CSS Class 的版本和 CSS 变量的版本。

接着可以使用 http-server 这个包和 Chrome 的 performance 工具来对这两个文件进行测试。

测试结果

使用 CSS 变量的 HTML 文件大小会更大，因为相比于使用静态 CSS 来说，会需要多生成一些 CSS 变量。

使用静态 CSS (毫秒)

使用 CSS 变量（毫秒）

结论

在 10000 个 HTML 节点上使用 5000 个 CSS 变量只比普通使用 CSS 慢 0.7% 。但是实验环境相比业务场景也显得比较简单。通过数据看来，仅仅通过使用 CSS 变量 ， 并不会 显著降低 页面的 渲染速度。

但在某些场景下，可能还是得关注下性能问题，比如在 CSS 的 calc 函数中使用 CSS 变量或使用 JavaScript 频繁地更改 CSS 变量。

文章翻译自：原文链接[2] 测试源码：源码链接[3]

❤️支持

如果本文对你有帮助，点赞👍支持下我吧，你的「赞」是我创作的动力。

关于我，目前是字节跳动一线开发，工作四年半，工作中使用 React，业余时间开发喜欢 Vue。

参考资料

[1]

CSS 变量教程- 阮一峰的网络日志: https://www.ruanyifeng.com/blog/2017/05/css-variables.html

[2]

原文链接: https://blog.okopress.dev/css-variables-performance-benchmark-2021-f56cd26ae9f5

[3]

源码链接: https://github.com/fedek6/css-variables-benchmark