jQuery Large List Performance

Question

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!

Answer 1

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

• reasons-to-use-append-correctly
• 5 easy tips on how to improve your code performance while working with huge data sets in jQuery