Обработка тысячи элементов списка в HTML / Javascript

Question

У меня есть сценарий пользовательского интерфейса, который содержит список (<ul>) с потенциально огромным количеством элементов списка (<li>).Сценарий включает в себя поиск, фильтрацию (по классам и атрибутам), удаление и создание этих элементов с использованием jQuery.Каковы лучшие практики и оптимизации для обработки этого случая?Насколько медленным / тяжелым может быть этот интерфейс с огромным количеством элементов?

Answer 1

Для лучшей производительности работайте с вашими объектами вне DOM и избегайте чрезмерного повторного добавления, добавляя наконец все и делегируя ваши события.

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

Если вам нужно работать с элементами в DOM, то лучше detach() элемент или clone() его, работать с ним и append() снова в DOM.

Answer 2

Работайте со своими ul вне DOM, следуя этому шаблону:

// 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);
​

См. Этот пример jsFiddle , который создает 5000 lis, а затем фильтрует их (по классам), чтобы показать толькопростые числа, чтобы показать, как этот шаблон может быть достаточно эффективным, и вы не должны столкнуться с проблемами.

Answer 3

Чтобы ответить на ваш второй вопрос несколько:

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

Было ли это достаточно быстро?

Answer 4

Это достаточно тяжело, когда сотни, а не тысячи: D

Возможно, вам следует использовать нумерацию страниц с AJAX или без.