Question

This project I am working on, I have a list of elements and convert them into a “graph” (not a true graph, but you can call it a psuedo one). I have my data set, i run a for loop over the data and then create a li element for each one, create and parent ul, append the lis and then append the parent to another DOM element (we’ll call it grandparent) already on the page. After that, i have to make subsequent updates to that list based on user interaction.
Also, this is all in the context of using jQuery.

Now, my question is – is it faster to create the elements once then update the resulting HTML on each subsequent call or is it faster to just recreate each element, empty() the grandparent element (which would get rid of the parent ul) and then reappend the newly created ul (which I am doing now)?

Keep in mind that when I am recreating the lis, they are not in the DOM at all so there is no repaint/reflow while recreating them. The repaint only happens when I reappend the newly created ul.

I was speaking to a coworker and he said it would be better to just update the HTML elements once they are created rather than recreating them every single time. i was thinking of going this route, but then I thought that updating the existing lis would actually cause a repaint on say 50 elements versus just doing one massive one with the empty() then reappending the newly created ul.

thoughts?

Answer 1

As rsp says, you’ll need to profile your solutions, as which will be fastest depends both on the structure of your markup and on the particular browser its running on. It’s also, of course, only worth going through all this effort if you’re unhappy with the speed you’re currently getting!

There are three basic approaches, however, each of which could be the fastest. The first only causes a single repaint; the others only two, if you choose your parent node well.

1. Construct your new content as HTML strings ([...].join("")), then apply with .html(). Pros: typically faster than method #2. Cons: not necessarily by much, can leave stale jQuery data/events (i.e. can leak, if you aren’t careful).

2. Construct your new content with jQuery outside the document (e.g. put all your <li>s into a <ul>, then insert the <ul> into the document after construction is complete), then insert normall. Pros: tends to be easier to read than method #1. Cons: performs worse the more complex your markup gets.

3. Remove the existing nodes from the document (ideally, a single parent node, like the <ul>), make your changes, then reinsert them. Pros: may be clearer and more performant than method #2, especially on complex markup. Cons: becomes much more complex if the number of elements changes between renderings.

The last one only causes two repaints even though you’re making a large number of changes, because only the initial removal and final insert affect the document. Changing elements outside the document doesn’t cause repaints.