What the site fails to explain is why these things are important. Changing a property that effects a layout change means the browser will need to redraw that element and anything that the geometry has pushed around. A full repaint is slow so if you're doing it often the user's experience will be very negatively impacted. A composite event should be pretty fast as it happens largely on the GPU hardware.

For this reason, for example, animating things with a CSS transform is considerably better for the user than animating a property like left or margin-left. Animating with CSS can be much better than something like jQuery's animate().

If you want to know more, google 'layout thrashing'.

"fails to explain" is a bit harsh. It's a cheat sheet for people who already know about layout thrashing.

If you click on a property name, it actually gives a pretty decent explanation. I agree a link to additional overall context could be useful, but I think you're overstating the gap.

Great list. Very useful.

The info box renders halfway off the screen in Safari 7.0.5

Fairly useful reference. Nees a key for the colors. I had no idea what the dots meant.

There is a key... although they should use tooltips so that when you scroll the key out of view you can still tell which dot is which but rolling over them

Or just scroll the key with the giant "Select a property" thing.

There are tooltips, at least in the form of alt tags.

Worth pointing out that this is only tested in Chrome for the time being.