處理HTML/Javascript中的數千個列表元素

我有一個UI場景，它包含一個列表（<ul>），其中包含大量列表項（<li>）。該場景包括使用jQuery搜索，過濾（在類和屬性上），刪除和創建這些項目。處理這種情況的最佳實踐和優化有哪些？用戶界面可以通過大量元素獲得多大的緩慢/沉重？處理HTML/Javascript中的數千個列表元素

來源

2012-02-22 Armando Pérez Marqués

如果您將事件綁定到所有（或多個）這些'li'元素，請將事件處理程序綁定到父'ul'。這樣，你只有一個（更高效），並且隨着DOM事件向上冒泡，你仍然可以在那裏捕獲它們。 – 2012-02-22 22:18:27

這是夠重的時候上百個，而不是幾千人：d

也許你應該使用分頁帶或不帶AJAX。

來源

2012-02-22 22:19:04 aletzo

要有所回答你的第二個問題：

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

是不是足夠快？

來源

2012-02-22 22:21:34 mindandmedia

爲了獲得最佳性能，請在DOM外使用您的對象，並通過最後追加所有內容並委託您的事件來避免過多的重排。

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

如果你有在DOM元素來工作，那麼最好是detach()元素或clone()它，與它的工作，並append()它的DOM一次。

來源

2012-02-22 22:27:17 elclanrs

按照這種模式與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，然後過濾它們（按類別），只顯示質數，以顯示該怎麼格局可以很有效率，你應該沒有問題。

來源

2012-02-22 22:36:48 Paulpro

處理HTML/Javascript中的數千個列表元素

回答

相關問題