HTML/Javascriptで何千ものリスト要素を扱う

Question

私は、リスト項目（<li>）の可能性があるリスト（<ul>）を含むUIシナリオを持っています。このシナリオでは、jQueryを使用して、検索、フィルタリング（クラスおよび属性に対する）、削除および作成が含まれます。このケースを処理するためのベストプラクティスと最適化は何ですか？膨大な数の要素を持つUIはどれくらい遅く/重くなりますか？

Answer 1

何百、何千とき、それは十分に重いです：D

は、たぶん、あなたがまたはAJAXせずにページネーションを使用する必要があります。ややあなたの2番目の質問に答えるために

Answer 2

：

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 3

最高のパフォーマンスを得るには、オブジェクトをDOMの外で使用し、最後にすべてを追加してイベントを委任することで過剰なリフローを避けます。再びDOMへ

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

あなたはDOM内の要素で作業する必要がある場合、それは要素またはclone()それ、それで仕事をdetach()すると良いでしょう、とappend()それは。このパターンに従うことによって、DOMのあなたのULの外部との

Answer 4

仕事：

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

5000のLISを作成し、唯一の方法このパターンを示すために素数を表示するには（クラスで）それらをフィルタリングこの例jsFiddleを参照してください。非常に効率的なことができますし、問題に遭遇する必要はありません。