jQuery顯示/隱藏大表性能

Question

我有大約30列和10至500 ish行之間的html表。我想顯示/隱藏一組列，點擊按鈕。

我試圖接近2至表的THEAD日

1. 迭代，做.show（）或.hide（）的TH和TD。
2. 遍歷表的thead th並更改類以顯示/隱藏TH和TD。

該函數實現如下代碼片段。但是，表現並不是那麼好。顯示/隱藏說20列可能需要大約5〜10秒的數據80〜120行。

我只是想知道是否有什麼我們可以做，讓它走得更快。

function ToggleHeadVisibility(showHide) { 

    var index = 0; 

    $('#' + gridViewName + ' thead th').each(function(index) { 
     index++; 
     if (showHide == "SHOW") { 
      /* 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); 
      */ 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); 
     } else if (showHide = "HIDE") { 
      /* 
      //if (showColumnArray.has($(this).get(0).innerHTML)) { 
      if (showColumnArray.has($(this).attr('title'))) { 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show(); 
      } 
      else { 
      $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide(); 
      $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide(); 
      } 
      */ 
      if (showColumnArray.has($(this).attr('title'))) { 
       $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide'); 
       $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide'); 
      } else { 
       $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide'); 
       $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide'); 
      } 

     } 
    }); 
} 

Answer 1

一些建議：

1. 當構建一個表，添加CSS類等col1, col2, col3等來報頭和數據單元。然後你可以做$("td.col1").hide();來隱藏相應的列。它比第n個孩子選擇器更快。

2. 在IE和Firefox中，您可以將visibility: collapse設置爲col元素以摺疊整個列。這會更快。不幸的是，Webkit瀏覽器不支持http://www.quirksmode.org/css/columns.html。您可以基於瀏覽器分支代碼，以便它至少在IE和Firefox中快速運行。

3. 如果您的表格有table-layout: fixed，它可能會顯着提高性能，因爲您的瀏覽器無需像在自動模式中那樣每次觸摸表格時都繼續計算列的寬度。

4. 考慮從DOM樹中刪除表（通過.remove()），執行批量顯示/隱藏操作並將其重新插入。當您想要對DOM樹執行批量操作時，這是一個常規規則。

Answer 2

顯然，這種替代是顯示和隱藏的元素一個小迅捷：

.css({'display':'none'}) & .css({'display':'block'}); 

http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

但我懷疑你的真正的問題是循環。

Answer 3

這裏是代碼我用來隱藏在我的網格「第n」列中的和平......

if (true) { 
     $('th:nth-child(' + c + ')').show(); 
     $('td:nth-child(' + c + ')').show();       
    } 
    else { 
     $('th:nth-child(' + c + ')').hide(); 
     $('td:nth-child(' + c + ')').hide();       
    } 

你的差不多，只是我用jQuery的切換「顯示/隱藏」;

這似乎表明400行的下1秒/隱藏列...

Borik酒店

Answer 4

你可以在緩存方面做了很多。對於初學者來說，緩存你的GridView容器：

var gridView = $('#' + gridViewName); 

以及隨後行可以被緩存：

var row[0] = gridView.find('tr:nth-child(0)'); // Not sure the path is right, but you get the idea... 

而且，使用設定執行實際隱藏，而不是一個。每（）

row[0].addClass('columnHide'); // Calls addClass() on each element in the set 

先將元素緩存起來，而不是用$反覆查詢DOM，然後對元素集而不是循環執行操作可以在性能方面發揮很大的作用。

Answer 5

通過行和列迭代總是會減慢速度。嘗試直接操縱CSS規則以避免JavaScript中的迭代，並強制瀏覽器爲您執行此操作。

結帳插件jQueryRule和jQueryCSSRule。

操縱CSS規則，如果你把所有的規則直接可以是有益的。這裏有一個quick test，有500行，50列。大部分時間都花費在重新渲染上，花費在JavaScript功能上的時間平均在Chrome上爲200-300 ms，在Firefox上爲0 ms。目前它使用的是標準API，但將它擴展到IE是微不足道的。

它通過創建文檔內的新<style>節點，將所有列的操作出現。關鍵的想法是在隱藏某些列時將所有規則合併爲一個。因此，而不是這樣做的：

table tr :nth-child(1) { display: none; } 
table tr :nth-child(4) { display: none; } 
table tr :nth-child(7) { display: none; } 

它：

table tr :nth-child(1), table tr :nth-child(4), table tr :nth-child(7) { 
    display: none; 
} 

當所有列必須回顯，刪除上述這一條規則是隱藏特定列。

Answer 6

我可以提出這樣的建議嗎？

$(function() { 
    $('#show').click(function() { 
     var i; 
     for (i = 0; i < titles.length; i++) 
     { 
      ToggleHeadVisibility('SHOW', titles[i]); 
     } 
    }); 

    $('#hide').click(function() { 
     var i; 
     for (i = 0; i < titles.length; i++) 
     { 
      ToggleHeadVisibility('HIDE', titles[i]); 
     } 
    }); 
}); 

var titles = ['one', 'three', 'five']; 

function ToggleHeadVisibility(showHide, title) 
{ 
    var x = $('th[title=' + title + ']').index(); 
    var selectString = 'th:nth-child(' + (x + 1) + '), td:nth-child(' + (x + 1) + ')'; 
    var $set = $(selectString); 

    if (showHide === "SHOW") 
    { 
     $set.show(); 
    } 
    else if (showHide === "HIDE") 
    { 
     $set.hide(); 
    } 
} 

我認爲它是，事實上，你的循環，這是麻煩。您正在迭代表格中的每個和。如果你只想找到特定的，爲什麼不迭代你想找到的那些呢？

所以，這裏所發生的這一點。點擊「顯示」（或「隱藏」）按鈕，我們遍歷titles數組，調用ToggleHeadVisibility。

在這種功能，我們可以得到給定標題的第一個元素的索引，然後顯示或隱藏第n個孩子（x）的節點。

我桌子上有6列運行它，並顯示在一個時間躲在3，和超過1000行。它的速度非常快，因爲它在做什麼。

請注意，如果您的標題 s不是唯一的，它只會找到表中的第一個。