Is CSS text conversion expensive?

Question

Is CSS text-transform expensive in terms of processing? It seems to me that the browser is forced to do some work that you usually don’t need (unless you converted), but is this a significant part of the processing? Does this affect performance at all?

Answer 1

The client browser may require a little more, but it will be completely insignificant if you do not convert pages and pages of text (and if you do this, you are doing something wrong).

You also have the overhead of having a CSS property written in your stylesheet (a heavier file), but again these are just a few characters and shouldn't matter.

---

I was curious, so I did some basic tests. On Firefox 3, I displayed a page with 200 paragraphs of Lorem Lipsum.

Rendering will take from 0.150 to 0.175 s

When adding text-transform:none I do not see a significant difference.

When adding text-transform:uppercase now takes between 0.350 and 0.380 s

When adding text-transform:capitalize now requires between 0.320s and 0.350s

Adding text-transform:lowercase now requires 0.320s and 0.350s

So it’s obvious that we have some overhead handling this, but again I use hundreds of lines and it only costs 0.2 s. Therefore, if I were you, I would use it without thinking too much about performance, if you do not want the text to convert huge chunks of text.

Answer 2

If you are developing for mobile, every bit helps. If it is not dynamic, enter it in uppercase

Answer 3

I see no reason why it should be more expensive than any other CSS style. All he does is convert the string to upper / lower case, which is hardly the most tax process a computer can ask for.

I would compare it to display in italics or bold; both of these styles effectively change the font for the entire line, but you don’t think you’re using them in case of an intensive processor for the browser, right?

The only time you could even think of text-transform as a difficult time would be if you were using a non-Latin character set, in which case converting to upper / lower case might not make sense. But you can be sure that browser manufacturers have covered this. (and in any case, if you are in this position, why do you want to use text-transform ?)