logo标签列表

jQuery大列表性能

jqueryjson
3

我在使用jQuery动态创建层叠列表时遇到了性能问题。我通过JSON从服务器检索数据，然后在客户端使用以下方法呈现：

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'项目。对于大约6,500个项目，数据在约1.5秒内从服务器检索出来，但在此之后建立和绘制列表需要约4.4秒的时间。到目前为止，这是我见过的最快速度，但11k + 项目是正常的。我还希望尽可能减少任何插件，因为此列表是可拖放的，并且相当动态，因此只有在悬停在'span'上后才会激活可拖放功能。

非常感谢您提供的任何指针！

1
你需要将它分解开来。确保用户不会同时看到15k条目！首先渲染客户端上最重要的内容，然后逐步进行下一个操作，直到所有的都完成。或者你可以使用服务器端的渲染，例如LINQ、XML转换等等。 - Piotr Kula
你可能想将其分解为小部分，例如加载前500个，然后使用Ajax代码从服务器获取另外500个，以此类推。但是，对于超过11k的数据量，通过HTML和JS处理会非常困难（据我所见）。 - Ahmed Magdy
1个回答
4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接