在HTML/Javascript中处理数千个列表元素

我有一个UI场景，其中包含一个列表（

），其中可能包含大量列表项（

）。该场景包括使用jQuery搜索、过滤（类和属性）、删除和创建这些项。处理这种情况的最佳实践和优化是什么？有大量元素时，用户的速度有多慢/多重？

如果有数百个元素，而不是数千个元素，它就足够重了

---

也许您应该使用带AJAX或不带AJAX的分页。

稍微回答您的第二个问题：

var ul = jQuery('<ul/>');
for( var i = 0; i < 100000; i++)
{
  var li =jQuery('<li class="hilight"/>');
  if( i % 2 == 0 )li.addClass('special');
  ul.append(li);
}

jQuery(".special").css("background-color","green");

var-ul=jQuery（“
”）；
对于（变量i=0；i<100000；i++）
{
var li=jQuery（'
）；
如果（i%2==0）li.addClass（'special'）；
ul.附加（li）；
}
jQuery（“.special”）.css（“背景色”、“绿色”）；

---

速度够快吗？

为了获得最佳性能，请在DOM之外处理对象，并通过最后追加所有内容和委派事件来避免过度回流

$('<li/>', { ... }).appendTo('#el'); // Dynamic object, appended at last
$('ul').on('click', 'li', function(){ ... }); // Delegate events

$（'
'，{…}）.appendTo（'#el'）；/动态对象，最后追加
$（'ul'）。在（'click'，'li'，function（）{…}）上；//委派事件

---

如果您必须使用DOM中的元素，那么最好是

detach（）

元素或

clone（）

它，使用它，然后

append（）

再次将它添加到DOM中。

按照以下模式使用DOM之外的ul：

// Clone the ul
var $the_ul = $('#the_ul');
var $new_ul = $('#the_ul').clone();

// Do stuff to $new_ul
// In this example create 5000 lis
for(var i = 1; i <= 5000; i++){
    $new_ul.append($('<li class="li-' + i + '">foo ' + i + ' bar</li>')); 
}

// Replace the ul in the dom with the updated one
$the_ul.replaceWith($new_ul);
​

//克隆ul
var$the_ul=$（'the#ul'）；
var$new_ul=$（“#the_ul”）.clone（）；
//对$new_ul做些事情
//在本例中，创建5000个lis
对于（var i=1；i），如果要将事件绑定到所有（或许多）这些
li
元素，请将事件处理程序绑定到父
ul
。这样，您只有一个（更有效），并且当DOM事件在树上冒泡时，仍然可以在那里捕获它们。