#ASKTHEINDUSTRY 04: Can CSS help the browser with performance, or does it just add costs?

I’ll give you the TL;DR first: yes. CSS can — and should! — help the browser with performance.

So, let’s set the record straight: the browser is GREAT at rendering our stuff. It’s great at optimizing, prioritizing, caching, and so on. However, there’s some limit to what the browser alone can do. Sometimes, it is necessary for it to be pessimistic and optimize for the worst case scenario. And that’s where we, as human beings, can help the dude. We, sometimes, know what’s going to happen. Most importantly, we may know what’s NOT going to happen.

What this implies is that there’s an opportunity to hint the browser of what’s going to happen, so that it can forget about the worst case scenario and be more.. optimistic.

CSS has some features that enable developers to do precisely this: a popular one is will-change. By specifying will-change on an element, you basically suggest to the browser to go on and prepare ahead of time for what’s going to happen: for example, if it knows that such an element is going to change its transform property, it can go on and promote the element to its own layer, in order to avoid paints.

Another interesting one that I learned about lately, is the upcoming CSS contain property. It allows developers to define the boundaries of an element, which is almost impossible to do by statically analyzing the code, as the browser would. It works pretty much like an iframe. It creates a layout root, and hints the browser that subsequent DOM changes in the sub-tree will never trigger reflows in the parent document. Boom. Just the components inside of the boundaries will need to be repainted!

So yeah, I would say that CSS can help a lot with performance.

This piece is part of the #ASKTHEINDUSTRY project, a series of daily conversations with the Web Dev industry. You ask, I’ll answer, or find someone who can.