本文首发于公众号「小李的前端小屋」，欢迎关注～
CSS 变量自 Chrome 49 (March 3, 2016) 版本开始支持。
如果你还不了解 CSS 变量，推荐阅读 CSS 变量教程- 阮一峰的网络日志
到如今，几乎所有的主流浏览器都已经支持了该特性。当然，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 (毫秒)
| 次数 | 加载 | 脚本执行 | 渲染 | 绘制 | 系统 | 空闲 | 总计 |
|---|---|---|---|---|---|---|---|
| 1 | 33 | 4 | 329 | 17 | 110 | 4948 | 5441 |
| 2 | 31 | 3 | 317 | 12 | 113 | 4928 | 5404 |
| 3 | 28 | 3 | 351 | 19 | 117 | 4950 | 5468 |
| 4 | 29 | 4 | 314 | 14 | 117 | 4943 | 5421 |
| 5 | 31 | 4 | 332 | 18 | 112 | 4944 | 5441 |
使用 CSS 变量（毫秒）
| 次数 | 加载 | 脚本执行 | 渲染 | 绘制 | 系统 | 空闲 | 总计 |
|---|---|---|---|---|---|---|---|
| 1 | 33 | 3 | 381 | 16 | 110 | 4906 | 5449 |
| 2 | 38 | 2 | 358 | 20 | 114 | 4962 | 5494 |
| 3 | 36 | 2 | 371 | 24 | 106 | 4978 | 5517 |
| 4 | 36 | 2 | 321 | 11 | 106 | 4934 | 5410 |
| 5 | 33 | 3 | 353 | 22 | 108 | 4977 | 5496 |
结论
在 10000 个 HTML 节点上使用 5000 个 CSS 变量只比普通使用 CSS 慢 0.7% 。但是实验环境确实也是个非常简单的场景。通过数据看来，仅仅通过使用 CSS 变量 ， 并不会 显著降低 页面的 渲染速度。
但在某些场景下，可能还是得关注下性能问题，比如在 CSS 的 calc 函数中使用 CSS 变量或使用 JavaScript 频繁的更改 CSS 变量。
❤️支持
如果本文对你有帮助，点赞👍支持下我吧，你的「赞」是我创作的动力。
关于我，目前是字节跳动一线开发，工作四年半，工作中使用 React，业余时间开发喜欢 Vue。
平时会不定期对前端的工作思考与实践进行深度分享和总结，公众号「小李的前端小屋」，感谢关注～
