jQuery大列表性能 [英] jQuery Large List Performance

问题描述

我在使用jquery动态创建分层列表时遇到性能问题.我通过JSON从服务器检索数据，然后使用以下方法将其呈现给客户端:

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>");
    }
}

列表最多可以包含15,000个列表"li"项目.大约有6500个项目，大约需要从服务器中检索数据. 1.5秒，但此后大约需要4.4秒来构建和绘制列表.这是到目前为止我所见过的最快的项目，但11k +个项目是正常的.我还想最小化任何插件，因为此列表是可拖放的并且非常动态，因此在将鼠标悬停在"span"上之前不会激活可拖放.

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!

推荐答案

一些链接，可指导您提高jquery的性能并将项目附加到dom

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

• reasons-to-use-append-正确地使用
• 5个简单在jQuery中处理大量数据时如何提高代码性能的技巧

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

这篇关于jQuery大列表性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！