This content originally appeared on Bram.us and was authored by Bramus!
With @property now being Baseline Newly Available, I thought it’d be a good time benchmark the impact – if any – it has on the performance of your CSS.
When starting to use a new CSS feature it’s important to understand its impact on the performance of your websites, whether positive or negative. With
@propertynow in Baseline this post explores its performance impact, and things you can do to help prevent negative impact.
For this I built and open sourced the “CSS Selector Benchmark” project which I have been working on for some time now.
To benchmark the performance of CSS we built the “CSS Selector Benchmark” test suite. It is powered by Chromium’s
PerfTestRunnerand benchmarks the performance impact of CSS. ThisPerfTestRunneris what Blink (= Chromium’s underlying rendering engine) uses for its internal performance tests.The runner includes a
measureRunsPerSecondmethod which is used for the tests. The higher the number of runs per second, the better.
The created benchmarks for @property specifically measure how fast Blink can handle a Style Invalidation and the subsequent Recalculate Style task. This was tested with both registered and unregistered custom properties, as well as regular properties.
Read “Benchmarking the performance of CSS @property” on web.dev →
Check out “css-selector-benchmark” on GitHub →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2024-10-03T13:03:14+00:00) Benchmarking the performance of CSS @property. Retrieved from https://www.scien.cx/2024/10/03/benchmarking-the-performance-of-css-property/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.