Performance of Var evaluation for CSS Variables

[Aloke Desai]

Hi team,

Does anyone know if there are any performance ramifications of evaluating `var` in css variables? 

For example, in the docs editors, we're currently  setting the values of css variables once in head like so:

1. <style>
2. :root {
3. --docs-font-family: Roboto, Arial, sans-serif;
4. }
5. </style>

Are there cases where evaluation of this css variable could increase style resolution time?

Best,

Aloke

[Rune Lillesveen]

In guess. I'd expect:

  :root { --docs-font-family: Roboto, Arial, sans-serif }

  .usefont { font-family: var(--docs-font-family) }

to be slower than:

  .usefont { font-family: Roboto, Arial, sans-serif }

Do you have a specific performance issue or use-case?

I'm not too familiar with the implementation details.

--

Rune Lillesveen

[Aloke Desai]

For context, Docs is using CSS variables to rollout support for Roboto and Google Sans as part of GM2 (more info here: https://docs.google.com/document/d/1I5CQkLna5v3tXLeVhv1oxJwit9IIAUbq1fpht7rR6T0/edit#heading=h.t794k5ngq9v3). We'd like to confirm that the approach of using CSS variables doesn't cause a performance regression in rendering but we can't seem to find enough data online about performance of `var` and how performant the style resolution is. 

Anecdotally we haven't seen a performance regression but would like to confirm if possible before proceeding with implementation :) 

[alanc...@google.com]

Using var() results in an additional token splicing + parsing step in addition to style value application.

See the the call to ResolveVariableReferences() followed by a recursion call in ApplyProperty(): https://cs.chromium.org/?q=function:StyleBuilder::ApplyProperty+f:style_builder_custom

I'm afraid I don't know of any metrics for the performance effects of this extra work.

[Aloke Desai]

Do you know what the magnitude of these additional steps are? Is it just a few ms for thousands of elements in the DOM or something more significant? Do you have any suggestions on the best way of timing the style resolution here?

[Mike Lawther]

You could set up two tests - one with variables in it, and one with the variables 'pre-resolved'.

You can use Chrome's profiling tools (either in devtools, or about:tracing) to grab a trace and compare the style resolution times.

I believe the cost is more dependent on the number of rules with variables, rather than the number of elements. Alan can correct me?

--
You received this message because you are subscribed to the Google Groups "style-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to style-dev+...@chromium.org.
To post to this group, send email to styl...@chromium.org.
To view this discussion on the web, visit https://groups.google.com/a/chromium.org/d/msgid/style-dev/CAGUKeNO5QvvGwoGtdGk7a77YHf8De0XdU%2B-m09qrwfwObB30kQ%40mail.gmail.com.