SXSW: Fast CSS

Posted by Tejus Parikh on March 13, 2012

This was easily the nerdiest talk I attended. The core of the talk was a very developer level view of a modern CSS rendering engine.

I can’t find the slides from the talk, but the basic idea is that there are multiple stages to rendering CSS. Each of those stages could be optimized or skipped depending on the change.

For instance, if one is doing multiple actions on a single element, the browser engine will batch those operations to avoid multiple refreshes. Writing a property, followed by an immediate read will cause that operations buffer to be flushed, resulting in sub optimal performance.

A few other items I learned in the talk were that most browsers only refresh at 60Hz, since that’s the refresh rate of most computer monitors. There is no reason to waste extra CPU cycles if they will only result in an unseen change. Also, most browsers read selectors right to left. Therefore for optimal performance, you would want a match to be as specific as possible.

Update: David Baron resent me the link to his talk

Tejus Parikh

I'm a software engineer that writes occasionally about building software, software culture, and tech adjacent hobbies. If you want to get in touch, send me an email at [my_first_name]@tejusparikh.com.