Chrome中的DOM操作緩慢（隱藏/顯示元素）

Question

今天早上我已經在http://jsfiddle.net/Hwqb3/3/上做了一個小測試。這是一個更大的分頁項目的背後。我已經試過這與本地JS和jQuery。該測試使用jQuery。

對SO的快速搜索表明，如果設置了背景大小，Chrome可以很好地處理事情，但這不是這種情況。源代碼中沒有背景大小的痕跡，並且檢查元素顯示沒有設置/繼承背景大小。

當5000個元素被添加到列表中時，忽略初始頁面加載。這只是幾秒鐘，但它只是有一些要測試的元素。

在Firefox 18.0.1中，頁面之間的移動幾乎是即時的，在IE9中，鼠標點擊和分頁結果刷新之間可能會有0.1秒的延遲;但是，在Chrome（24.0.1312.57米）中，延遲時間明顯爲1-2秒。

我昨天晚上的大部分時間都花在了我的代碼上，看看能否在寫這個測試之前找到原因。這是光禿禿的骨頭，仍然存在問題。

我只能假設Chrome正在處理element.style.display ='';不好。如果沒有這個（甚至循環5000個元素來顯示='無'），事情就會很快。

任何想法？客戶希望對大約4,000 - 7,500的結果集進行分頁，但不希望頁面重新加載，並且不理解他們應該使用過濾器將該列表縮小到< 100，因爲沒有人會通過200頁面 - 375頁尋找特定的東西。

最後的解決方法是AJAX調用，在Chrome上可能會稍微快一點。但未經測試。

在此先感謝。

從的jsfiddle代碼，不包括jQuery的CDN鏈接

HTML：

<a href="javascript:jump('first');">First</a> 
<a href="javascript:jump('-1');">Previous</a> 

<a href="javascript:jump('+1');">Next</a> 
<a href="javascript:jump('last');">Last</a> 
<br> 
<ul id='list'> 
</ul> 

JS：

window.onload=function() { 
    window.list=$('#list'), window.max=20, window.page=0, window.pages=0, window.elements; 

    var i=0; 
    while(i<5000) { 
     i++; 
     list.append("<li>"+i+"</li>"); 
    } 

    jump('first'); 
}; 

function jump(operation) { 

    window.elements=list.find('li'); 
    window.pages=Math.ceil(window.elements.length/window.max); 

    if(operation=='first') { 
     window.page=0; 
    } 
    else if(operation=='last') { 
     window.page=(window.pages-1); 
    } 
    else if(operation=='+1') { 
     window.page=(window.page+1); 
     if(window.page>=window.pages) { 
      window.page=(window.pages-1); 
     } 
    } 
    else if(operation=='-1') { 
     window.page=(window.page-1); 
     if(window.page<0) { 
      window.page=0; 
     } 
    } 

    var showing=0, total=0; 

    window.elements.each(function() { 
     var show=false, self=$(this); 

     if(showing<window.max) { 
      if(total>=(window.page*window.max) && total<((window.page*window.max)+window.max)) { 
       self[0].style.display=''; 
       showing++; 
       show=true; 
      } 
     } 

     if(!show) { 
      self[0].style.display='none'; 
     } 
     total++; 
    }); 


} 

Answer 1

檢查這個

window.onload = function() { 
    window.list = $('#list'), 
    window.max = 20, 
    window.page = 0, 
    window.pages = 0, 
    window.elements; 

    var i = 0; 
    var html = ''; 
    while(i < 5000) { 
     i++ 
     html += '<li>' + i + '</li>'; 
    }  
    list.append(html); 

    window.elements = list.find('li'); 
    window.pages = Math.ceil(window.elements.length/window.max);  

    jump('first'); 
}; 



function jump(operation) { 

    if (operation == 'first') 
     window.page = 0; 
    else if (operation == 'last') 
     window.page = window.pages - 1; 
    else if (operation == '+1') 
     (window.page + 1 >= window.pages) ? window.page = window.pages - 1 : window.page++ ; 
    else if (operation == '-1') 
     (window.page - 1 < 0) ? window.page = 0 : window.page--; 

    var index = page * window.max; 
    window.elements.hide().slice(index, index + window.max).show(); 
} 

http://jsfiddle.net/Hwqb3/16/