在javascript中隱藏和顯示表格的所有行的最快方法是什么？

Question

我正在建立一個用於查詢我們的html表（超過10k行）的過濾器。 我最初的想法是先隱藏所有行，然后取消隱藏與特定查詢匹配的行。 如果刪除了過濾器，則顯示所有行。

這是編寫隱藏/顯示所有行功能的最佳方法嗎？

// optimize this!
this.hideAllRows = function() {
    nodes = document.getElementById('table_body').children
    for(var i=0, i_max=nodes.length; i<i_max; i++) {
        nodes[i].style.display="none"
    }
}

// optimize this!
this.showAllRows = function() {
    nodes = document.getElementById('table_body').children
    for(var i=0, i_max=nodes.length; i<i_max; i++) {
        nodes[i].style.display=""
    }
}

謝謝！

Answer 1

一種解決方案是實現分頁或“無限”滾動功能。 這將消除同時渲染10k dom元素的需要。 您可以在用戶滾動時分批渲染它們，也可以將它們分塊成頁面。

或者，您可以嘗試將表從dom中拉出，隱藏行，然后重新插入。 這將防止不必要的回流/油漆/等。

Answer 2

根據經驗，使用純JavaScript for循環比使用jQuery .each()更快，但是使用.getElementById()和.children屬性的基本選擇已經得到了優化。

但是，在瀏覽器中遍歷10k +元素總是很慢。 顯示和隱藏元素最適合記錄100而不是1000的記錄集。

為什么不發出AJAX請求以返回已經格式化為<tr>...some <td>s here....</tr><tr>...some <td>s here....</tr>數據（可能是來自數據庫） <tr>...some <td>s here....</tr><tr>...some <td>s here....</tr>嗎？

這樣一來，您就可以讓數據庫在過濾方面承擔所有繁重的工作，它們已經過優化，可以做到這一點。 它使您的代碼簡單，帶寬減少，並且DOM操作降至最低。

每當您要應用過濾器時，都可以發出$.ajax請求。

function filter(criteria){

    $.ajax({
        url : myDataUrl,
        type : "POST",
        data : {criteria : criteria}
    })
    .success(function (data){
        $("#table-body").html(data);
    });
}