JavaScript/jQuery - performance issue

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.

If myArr is a jQuery set, you should be able to just do myArr.addClass('my-class'). Also, could you provide a jsFiddle to illustrate the slowdown? — millimoose
– millimoose, Commented Jul 16, 2012 at 19:58

bennedich · Accepted Answer · 2012-07-16 20:37:44Z

2

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.

answered Jul 16, 2012 at 20:37

bennedich

12.4k6 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moshe L · Accepted Answer · 2012-07-17 09:37:47Z

0

Why do not concat the arraies:

  myArr = myArr[0].concat(myArr[1],myArr[2]); 
  $(myArr).addClass( "my-class" );

I think it can be faster.

edited Jul 17, 2012 at 9:37

answered Jul 16, 2012 at 19:56

Moshe L

1,9051 gold badge16 silver badges21 bronze badges

3 Comments

user1106925 Over a year ago

You're concatenating the element in the array, and not the arrays themselves. And you're not saving the result. Also, what if a different class is applied for each array?

Moshe L Over a year ago

I want a one array to run $() once. in the question I do not see class-per-array. If it need to be, It will not help.

user1106925 Over a year ago

If you're trying to create a single array, do it like this: fullArray = myArr1.concat(myArr2, myArr3)

Collectives™ on Stack Overflow

JavaScript/jQuery - performance issue

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related