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 +元素总是会很慢。显示和隐藏元素最适合记录100s而不是1000s的集合。

为什么不制作一个AJAX请求来返回已经格式化为<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);
    });
}

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

2 个答案: