PhoneGap: Update that DOM while scrolling - easy! (for static elements)

A Tweet from my boss about another company's experience with PhoneGap was very relevant to us at the moment - they say that you should pause DOM updates while scrolling as it causes jitters, lags, whatever in the scrolling.

This is very true, one of the apps from a venture had that exact same problem. The use case is that as you scroll through a list of items it displays the current date range and a total in the nav bar at the top.

The problem? DOM updates basically cause a whole bunch of redraws throughout the page - the browser is recalculating god-knows-what. I try not to think about what it's doing as it hurts my head.

The solution? The shiny-shiny HTML Canvas element! And, of course, some custom drawing.

Typically we think of the Canvas element as a way to do high-performance custom rendering, but it's also a self-contained element - changes within it do not propogate outside of the canvas element.

You do, yes, lose a lot of the benefits of HTML in there, however if you've got a constrained set of data to display then it's perfect. It appears to be supported by a good set of browsers (tested on Android 4.1 and iOS 6) so we're more-or-less in the clear there, and we'd probably degrade gracefully to some sort of slower update for any browsers that don't support it.