Question

I have some kind of webapp here, which of course incorporates JavaScript and jQuery.
On load, a functions wraps a span around every letter of a text – about 150 letters. Then the user can select the letters and after a confirmation, a result is displayed. Everything works nice and smooth, only the last part really kills the performance.

The results are saved in three arrays. After on click the functions fires which adds classes to the clicked elements (this is the confirmation).

I do it like this (3 times, for each array):

$.each(myArr, function( i, v ){
    $(v).addClass( "my-class" );
});

It works this way, but because I manipulate the DOM heavily it kills the performance.

I am on a MacBook with 2.26 GHz and 2 GB RAM and I am not able to run a simple tooltip or anything after the classes has been added. Especially if one array is really full this has a negative performance impact.

I already tried to optimize the script. I cached every DOM object that is used more then once, but this is not possible in every case (I think…). I also used selectors like .my-class and #my-id instead of span[class = my-class] and span[id = my-id] to speed up everything. Only the last array part is bad.

Is there any way to optimize this $.each part? Caching or somehting? Or maybe using another technique?

I don’t expect the script to be SUPER fast – but adding a simple tooltip after the results are shown should be possible.

Answer 1

What seems to be the problem is that you cause a lot of browser reflows. This happens every time you make certain changes to an object in the DOM (like changing its size, removing/appending it etc). To prevent this from happening you can:

• Remove all objects at once by removing the parent object containing all objects (this causes one reflow).
• Make all the neccessary changes while the objects aren’t part of the DOM.
• Put the parent object back in the DOM (which once again causes a reflow).

If removing the parent object causes visual distractions you can instead deep clone it (var clone = parent.cloneNode(true)), make all the changes to the clone and then replace the parent object (parent.parentNode.replaceChild(clone, parent)). Be aware if the objects have any javascript event listeners you need to rebind these to the cloned objects.