CODEWITHSUNDEEP
javascriptoptimization
mtk
mtk

Reputation: 13717

jquery/js too slow while operating over 2000 rows

I have 2000 rows of data as follows 

<div class="rr cf">
    <span>VLKN DR EXP</span>
    <span>01046</span>
    <span>VELANKANNI</span>
    <span>20:30</span>
    <span>DADAR</span>
    <span>10:00</span>
</div>

On a button click I am checking for text within them and updating the display of each row to block or none. The code that does this is

$('.rr').each(function(){
    this.style.display="block";
});

var nodes = $(".rr");
for(var i=0;i < nodes.length; i++) {
     // if data found
         nodes.get(i).style.display="block";
     // else
         nodes.get(i).style.display="none";
}

This seems to be possibly very slow. I get chrome alert box as to kill the page.

Any ideas? what optimization can I do here?

Upvotes: 2

Views: 889

Answers (5)

Johan
Johan

Reputation: 1557

I'm also having performance problems while looping through roughly 1500 items.

As you might have guessed, the loop itself isn't the bottleneck. It's the operation you do within it that's the problem.

So, what I migrated the load using setTimeout. Not the prettiest of solutions but it makes the browser responsive between the updates.

var _timeout_ = 0;
for(var i=0;i < nodes.length; i++)
{
    setTimeout(
        (function(i)
        {
            return function()
            {
                if(stuff)
                {
                    nodes.get(i).style.display="block";
                }
                else
                {
                    nodes.get(i).style.display="none";
                }
            }
        })(i),
        _timeout_
    );
    _timeout_ += 4;
}

This will delay every update with 4 milliseconds, if the operation takes longer, the browser will become unresponsive. If the operation takes only 2 milisecond on your slowest browser, you can set it to 3, etc. just play around with it.

Upvotes: 0

Chase
Chase

Reputation: 29569

Local Variables and Loops

Another simple way to improve the performance of a loop is to decrement the iterator toward 0 rather than incrementing toward the total length. Making this simple change can result in savings of up to 50% off the original execution time, depending on the complexity of each iteration.

Taken from: http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html

  • Try saving the nodes.length as a local variable so that the loop doesn't have to compute it each time.
  • Also, you can store nodes.get(i) into a local variable to save some time if you are accessing that data a lot.
  • If the order isn't important, consider decrementing your for loop towards 0.
  • jQuery's each() loop is a bit slower than looping through the set yourself as well. You can see here that there is a clear difference.

Very simple example

You'll see that in my example, I've condensed the loop into a while loop:

var nodes = $(".rr span");
var i = nodes.length;

while(i--){ 
  if(i%2 === 0){
    nodes.get(i).style.color = "blue";}
}​

Notice that the while loop decrements i through each iteration. This way when i = 0, the loop will exit, because while(0) evaluates to false.

"Chunking" the Array

The chunk() function is designed to process an array in small chunks (hence the name), and accepts three arguments: a “to do” list of items, the function to process each item, and an optional context variable for setting the value of this within the process() function. A timer is used to delay the processing of each item (100ms in this case, but feel free to alter for your specific use). Each time through, the first item in the array is removed and passed to the process() function. If there’s still items left to process, another timer is used to repeat the process.

Have a look at Nick Zakas's chunk method defined here, if you need to run the loop in sections to reduce the chance of crashing the browser:

function chunk(array, process, context){
    setTimeout(function(){
        var item = array.shift();
        process.call(context, item);

        if (array.length > 0){
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

Using createDocumentFragment()

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

DocumentFragment are supported in all browsers, even Internet Explorer 6, so there is no reason to not use them.

Reflow is the process by which the geometry of the layout engine's formatting objects are computed.

Since you are changing the display property of these elements iteratively, the page mush 'repaint' the window for each change. If you use createDocumentFragment and make all the changes there, then push those to the DOM, you drastically reduce the amount of repainting necessary.

Upvotes: 3

Gareth
Gareth

Reputation: 380

Don't use jQuery here, jQuery will just slow things down here.

    var elements = document.getElementsByClassName('rr'),
        len = elements.length;

    for(var i = 0; i < len; i++)
    {
        var ele = elements[i];
        if(ele.innerHTML.search(/01046/) != -1)
            ele.style.display = "none";
    }

This should be much faster.

Upvotes: 0

goat
goat

Reputation: 31854

I would try

1) set display of the common parent element of all those divs, to "none"

2) loop through divs, setting display as appropriate

3) set parent element display back to block

I believe this will help because it gives the browser the opportunity to aggregate the rendering updates, instead of forcing it to fully complete each single time you change the display property. The visibility of all the child node are irrelevant if the parent isnt displayed, so the browser no longer has a need to render a change in each child until the parent becomes visible again.

ALso, I fail to see the purpose of you first looping through them all and setting them all to block before you loop again and set them to their intended value.

Upvotes: 0

logical Chimp
logical Chimp

Reputation: 1014

Firstly, where are the delays occurring - in the jquery code, or the data check? If it is the jquery, you could try detaching the data container element (ie the html element that contains all the .rr divs) from the DOM, make your changes, and then re-attach it. This will stop the browser re-processing the DOM after each change.

Upvotes: 0

Related Questions