Text CSS Rendering Performance : RGBA vs HEX vs OPACITY

Question

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>

span {color: black; opacity: 0.7;}
span {color: rgba(0, 0, 0, 0.7);}
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.

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
– ryancdotnet, Commented Oct 27, 2021 at 0:19

Alvaro Menéndez · Accepted Answer · 2022-01-17 23:07:26Z

40

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;} :

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

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

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

edited Jan 17, 2022 at 23:07

answered May 16, 2018 at 9:54

Alvaro Menéndez

9,0523 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Slbox Over a year ago

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?

Alvaro Menéndez Over a year ago

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...

ryancdotnet Over a year ago

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.

Collectives™ on Stack Overflow

Text CSS Rendering Performance : RGBA vs HEX vs OPACITY

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related