[SOLVED] Text CSS Rendering Performance : RGBA vs HEX vs OPACITY

Issue

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.

Solution

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.

Answered By – Alvaro Menéndez

Answer Checked By – Jay B. (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *