29

A designer always provides CSS using opacity rather than actual color values. Does this affect rendering performance in the browser?

Which renders faster, on an always white background, where I don't actually care about transparency.

<span>Hello</span>
  1. span {color: black; opacity: 0.7;}
  2. span {color: rgba(0, 0, 0, 0.7);}
  3. span {color: #b3b3b3;}

My gut says opacity is slower (despite being put in the GPU) as now at render time the browser has to take into account the background, so any changes will cause it to repaint the object because of this transparency, while a statically colored object will never change.

simbolo
  • 7,279
  • 6
  • 56
  • 96
  • 2
    Just a note: these three options are not equivalent. The first option (1) affects not just the text color, but the opacity of the DOM element, while the other two options affect only the text color. I believe this has implications on the render performance, as I noted in my comments on the great answer below. – ryancdotnet Oct 27 '21 at 00:19

1 Answers1

38

I've just made a simple HTML containing around 50k lines of span.

Then I used Google performance option to check the rendering progress.

Using span {color: black; opacity: 0.7;} :

enter image description here

Using span {color: rgba(0, 0, 0, 0.7);} :

enter image description here

And finally using span {color: #b3b3b3;} :

enter image description here

So, as you've guessed, using opacity is slower by a fair margin.

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • Great answer and thanks for making this test! I'm wondering if you ran this test repeatedly and found these results to be relatively consistent? – Slbox Aug 08 '20 at 20:56
  • 1
    If I remember right, I did the test 3 times in a row and all results were similar... but I have never done it again since then. Maybe the results may be different after +2 years... – Alvaro Menéndez Aug 08 '20 at 22:57
  • 2
    Quite an effective test! I recreated a similar test and found similar results. Used about 27,000 divs, and tested 3 different color assignments using flat color assignments and mixes of opacity assignments. Using latest Microsoft Edge, flat color assignments were noticeably faster than using the opacity property. However, using colors defined as rgba(), I didn't notice any difference than flat color assignments. So maybe that particular way of adding opacity using a color alpha channel works more efficiently than making the entire DOM element use opacity, since it only affects the text. – ryancdotnet Oct 27 '21 at 00:14