Was i the only person that was a little disappointed by this 'awareness' piece?

I've recently noticed some unintuitive (initially) painting issues: box-shadows with large blur radii freak out webkit/mobile safari. I had thought my site was dying because of some wacky js pokery i was doing and spent a considerable amount of time tuning my js to no effect. it turned out that this was a problem with how shadows are drawn in css when atop (i.e. looks like they're composited live, so umm... watch out).

Who knew? This was a sort of performance issue i remember coming across in ios core animation lectures and never considered (stupidly) that might be an issue when you get dynamically generated shadows from css. But the moral here really is, while repaint and reflow are killer, also watch that you're not doing some insane paint, because, you know, that's also a performance hit.

Aside: I was really hoping for something like a webkit or chrome plugin that lets you watch paint/repaint/reflow for your own js-heavy sites like a slow-mo Timeline feature in webkit's inspector.

While this is a perfectly valid point, particularly if you want your site to be usable on mobile devices (where the lower power of the devices mean you need to be more aware of potential performance bottlenecks) of have to support IE6 (which is slower than everything else by some magnitude for this sort of content update), in the example given it may be that only a few items are expected in each response in which case there will be little difference overall but the code is slightly more complex.

Also, the example given is an example designed to illustrate an unrelated matter: a callback method within a given API. In such examples it is generally best to include the minimum extra code needed to make a working example - adding extra code unrelated to what the example is demonstrating in order to optimise around browser bottlenecks could muddy the issue.

I remember hearing in a presentation by Douglas Crockford that the browser will reflow only after the event that triggered the JS has been handled.

So if you do 1 insert or 1000 in response to an event, it should only cause 1 reflow.

Animation on the other hand...