CODEWITHSUNDEEP
jqueryjson
comamitc
comamitc

Reputation: 841

jQuery Large List Performance

I am having performance issues with a dynamically created, layered list with jquery. I retrieve my data via JSON from the server and then rendering it client side with this:

for (var i = 0; i < myArray.length; i++){
    var subArr = myArray[i];
    var newElm = "<li id="+subArr.node_order+" value="+subArr.id+" class='list-item'><span>"+subArr.node_name+"</span><ul></ul></li>";
    var parent = $("li#"+subArr.parent_id+" ul");

    if(parent[0] != undefined){
        $(parent[0]).append(newElm);
    } else{
        sortable.html("<ul>"+newElm+"</ul>");
    }
}

The list can be up to 15,000 list 'li' items. with about 6500 items, the data is retrieved from the server in approx. 1.5 seconds but takes about 4.4 seconds after that to build and paint the list. This is by far the quickest i've seen so far but 11k+ items is normal. I also want to minimize any pluggins because this list is drag/droppable and pretty dynamic so drag/droppable doesn't become activated until hovering over the 'span'.

Any pointer are greatly appreciated!

Upvotes: 3

Views: 4193

Answers (1)

redsquare
redsquare

Reputation: 78667

A few links to guide you in jquery performance and appending items to the dom

Upvotes: 4

Related Questions