Question

I’ve got a few hundreds items list that I need to regularly ajax update and display on mobile devices (mobile wekbkit browsers predominantly). It’s easier for me to generate the entire list server side and update user’s screen with innerHTML. The list is mainly picture thumbnails. I don’t want the screen to flicker too much or be too much of a drag on their little mobile CPUs. My question is: what performs better in case of updating <ul> list, insertBefore + client side sorting or innerHTML of entire list?

Answer 1

The best answer is: Write it both ways and profile it on your target browsers.

However, in my previous experiments with this, I’ve generally found that when doing a big update, innerHTML was markedly faster than working through the DOM interface. Which makes sense: Fundamentally, browsers parse HTML into their internal structures and display the result. It’s their raison d’être, and they’re highly optimized for doing that. In contrast, lots of DOM calls require lots of trips across the JavaScript/browser internals interface, through an API that may or may not be a good fit for the internal structures of the browser. Of course, the picture today is quite different from a few years ago; DOM updates are much more common and much faster than they used to be.

But again, this stuff varies so much based on what you’re doing and your target browsers that it’s best to create a representative test each way and look at it empirically.