This article was first published on the public account “Xiao Li’s Front-end cabin”, welcome to follow ~

CSS variables have been supported since Chrome 49 (March 3, 2016).

If you are not familiar with CSS variables, you are recommended to read the CSS variables tutorial – Ruan Yifeng’s blog

Today, almost all major browsers support this feature. Of course, IE11 is definitely not supported.

Using CSS variables, you can easily achieve the site theme skin and other functions. How does it perform, because it’s computationally involved, does it increase the rendering time of the page when it’s used a lot on the page?

I did a simple benchmark test to create 5000 CSS variables to see if it slowed down the rendering of the page.

The test environment

steps

  • Generate 5000 colors

  • Create 10000 HTML nodes

  • Output an HTML file that changes the node color with a static CSS Class

  • Output an HTML file that changes the node color with dynamic CSS variables

  • Start the HTTP service locally using Node, and test the file five times using Chrome’s Performance tool

equipment

  • Linux, Google Chrome version 92.0.4515.159 (Official) Build (64 – bit)
  • No Google account, no browser plugins

Testing tools

git clone [email protected]:fedek6/css-variables-benchmark.git
cd css-variables-benchmark
yarn
yarn build
yarn start:compiled [number of random colors] [reuse factor]
Copy the code

Following the command above, a bundle folder is generated with two files: static and Dynamic, representing the version of the CSS Class and the version of the CSS variable, respectively.

You can then test both files using the HTTP-Server package and Chrome’s Performance tool.

The test results

HTML files with CSS variables are larger because more CSS variables need to be generated than static CSS.

Using Static CSS (ms)

The number of loading Script execution Apply colours to a drawing draw system free A total of
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

Using CSS variables (ms)

The number of loading Script execution Apply colours to a drawing draw system free A total of
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

conclusion

Using 5000 CSS variables on 10000 HTML nodes is only 0.7% slower than using CSS in general. But the experimental environment is also a very simple scenario. Using CSS variables alone does not significantly reduce the rendering speed of a page, according to the data.

However, there may be performance concerns in some scenarios, such as using CSS variables in CSS calc functions or using JavaScript to change CSS variables frequently.

Okopress. dev/css-variabl…

Test source: github.com/fedek6/css-…

❤ ️ support

If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation

Welcome to pay attention to the public account “Xiao Li’s Front-end cabin”. I am currently working in a big factory in the first line, and I will share and summarize my thinking and experience of front-end work in depth from time to time to help you become a better front-end.