Speed test between size units: rem, em and px

Question

Is there any evidence of a particular sizing unit taking longer to process? For instance, if you were to use rem to size your entire site would it take longer to calculate/paint the page than if everything were given a specific px value?

Is there any benefit to max-width: 16rem over max-width: 250px?

I'm under the impression that rem takes longer since it has to revert back to the root and calculate while em is like a steady stream of processing, and px would be the fastest because there's nothing to calculate.

Please let me know if anyone has any evidence of which method is faster

Answer 1

Edit: I started off pretty much dismissing this discussion as, well, polishing the roof of a truck, but I had not considered css-animations which are quite heavy pocessor users and with CSS not being a graphically optimized process (-very inefficient) then I think there is a slightly higher warrent for such a question, if a website has a large number of css-animations.

Quote from question:

I'm under the impression that rem takes longer since it has to revert back to the root and calculate while em is like a steady stream of processing, and px would be the fastest because there's nothing to calculate.

No. Rem simply takes a factor of the root em value, rather than the parent em value. (As the root doesn't change I would hope that the structure processing of CSS doesn't need to keep calling it and can instead simply regain it from memory).

rem Is the way we should be writing CSS in 2016. It beats lights out of em beyond having one or two parent elements effecting the em value, for instance [from the pont of view of working out as a developer what 1.2em of 1.4 em of 1.2 em of 14px is, why not just have 1.2 of 14px as 1.2rem].

As for px, that is not a straight-to-screen result either as with many modern display devices, the pixel is not a pixel, this may be an interesting topic for you to read.

If you care about the speed of processing rem against px then I personally feel you're in effect trying to get better fuel efficiency from your truck by polishing the roof so that air resistence is reduced, your work may have a tiny impact but there are other far larger consumers of GPU,CPU ram and operating power, and many more of them.

You may also like to read this: How a CSS pixel size is calculated?

And because I want to entertain you, you may like to know that you can now generate full 3D computer game levels developed entirely through CSS. This was made in 2013! I still find it increadible!!

In this game the developer used px throughout. You could perhaps take his code and apply em and/or rem and the heaviness of the page will display if it is indeed notably faster.