CSS Performance

Paul Irish | 2011

Slides: goo.gl/o40Zz

Best viewed in Safari Nightly or Chrome dev channel ;)
(Though it should work in FF as well)

Use the and keys.



clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, Image

height, width


getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

what actions trigger reflow

  • Adding, removing, updating DOM nodes
  • Hiding a DOM node with display: none (A-OK with visibility:hidden)
  • Moving, animating a DOM node on the page
  • Adding a stylesheet, tweaking style properties
  • User resizing the window, changing the font size, or scrolling

So, keep in mind...


  • Batch DOM changes before any reflow-triggering actions
  • cloneNode the elem, work on the copy, & swap it back
  • hide the element with display: none, add 100 changes, restore the display.

More on reflow...

Hardware Accelerated CSS

Leverage CSS transitions and transforms for optimal quality

Trigger HW Accel

translateZ(0) or translate3d(0,0,0)

Good for 2D transforms and opacity manip

trans & trans

Avoiding expensive CSS

Selector perf

Protip: Selectors are evaluated from right to left

#main .content h3

Selector engines, parse direction

Left to right (Top-down) Right to left (Bottom-up)
Mootools Sizzle
Sly YUI 3
Peppy NWMatcher
Dojo Acme querySelectorAll
Ext JS

Selector Optimization

Specific on the right, light on the left

// let's find the headline
#main .content h3

// specific on right, light on the left
.content h3.major

Recommendation: tag.class if possible on your right-most selector. Just tag or just .class on left.

Why right to left?

If you only had one selector and only one element to compare against that selector, then left-to-right makes more sense in some cases. But that's decidedly not the browser's situation. The browser is trying to render gmail or whatever and has the one it's trying to style and the 10,000+ rules gmail puts in its stylesheet (I'm not making that number up) ... the problem becomes one of deciding that a selector doesn't match as fast as possible ... browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly.
-- Boris Zbarsky, April 20111

The descendant selector

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.
-- Dave Hyatt, April 20001

The descendant selector

Note that the reason descendant selectors are considered "bad" is that browser implementations have sucked. There is nothing inherently wrong with them.
-- Antti Koivisto, February 20111

Style matching perf

.box {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFee;}
.box-1 {
  border:1px solid #000;
.box-2 {
  border:1px solid #000;
more from dave gregory


... a word on progressive enhancement

Aim for a great experience.

An excellent experience is better than feature parity across browsers


Testing HW acceleration in Safari..

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
$ CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator

In Chrome..

about:flags, enable: Composited render layer borders

Analyzing CSS perf in Chrome




More at: html5rocks.com/tutorials/#performance

Thx: Stoyan Stefanov, Divya Manian, Hakim El Hattab, Malte Ubl, Eric Bidelman, Thomas Fuchs, Peter Beverloo, Oli Studholme