javascript - 行数多的表更新慢

Question

我有一个包含非常大表(几千行)的页面。

该表显示了特定过滤器指定的数据子集。只要其中一个过滤器发生变化，我就需要更新表格。

基本上，有几个复选框和一个文本框，每当这些更改之一发生时，我都会重新加载表格以仅显示符合用户指定条件的那些行。

我通过清除表格并重新加载与过滤器匹配的行来执行此操作。这行得通，但已被证明非常慢。

这是我的javascript代码:

function reloadTable() {
    var tablebody = document.getElementById("tablebody");

    while(tablebody.hasChildNodes()) tablebody.removeChild(tablebody.firstChild);

    filter = new FilterChecker();

    for (var i=0;i<rows.length;i++) {
        if (filter.isVisible(rows[i]))
            addRowToTable(rows[i]);
    }
}

有没有办法让它更快？

Answer 1

好的，抱歉耽搁了，但我忙于工作。我提出了一套很好的逻辑来说明您的需求。

FIDDLE

我创建了一些简单的 html 来说明这一点。它包含两个下拉菜单以模仿过滤器和 8 个数据行以模仿您的数据网格。

<div id="body">
<select id="filterA" class="filter" name="states">
    <option value="filterACT">Connecticut</option>
    <option value = "filterAMA">Mass</option>
</select>
<select id="filterB" class="filter" name="towns">
    <option value="filterBBT">Big Town</option>
    <option value = "filterBST">Small Town</option>
</select>
<div id="grid">
    <div class="row filterACT filterBBT">BigTown CT 1</div>
    <div class="row filterACT filterBBT">BigTown CT 2</div>
    <div class="row filterACT filterBST">SmallTown CT 1</div>
    <div class="row filterACT filterBST">SmallTown CT 2</div>
    <div class="row filterAMA filterBBT">BigTown MA 1</div>
    <div class="row filterAMA filterBBT">BigTown MA 2</div>
    <div class="row filterAMA filterBST">SmallTown MA 1</div>
    <div class="row filterAMA filterBST">SmallTown MA 2</div>
</div>
</div>
</br>
<hr/>
<div>LOG</div>
<hr/>
<div id="log"></div>

log div 只是为了显示输出，我认为这会有所帮助。每行由类“行”标识，后跟另一系列类。这些类有助于确定它们的过滤数据是什么。在构建网格时，您需要以编程方式设置它。此外，这些类名必须与过滤器选项值相匹配。您可以看到第一行包含来自 filterA 中第一个选项和 filterB 中第一个选项的类。

现在，javascript 有点冗长，但您可以根据自己的喜好进行重构。有时我发现当你试图理解它们时，当事情是明确的时候会更容易。此外，不可否认，我会使用 jQuery 来完成此操作，因此我的纯 Javascript 并不那么敏锐。

var elements = document.getElementsByClassName('filter');

writeToLog("Filter elements found: " + elements.length);

for(var e = 0;e < elements.length;e++)
{
    elements[e].onchange =function() {   
        writeToLog('Filter event fired for id:'+this.id);
        filterChange();
    };
}

首先，我获取所有具有过滤器类的元素，这将是您的过滤器。然后我遍历它们并设置它们的 onchange 事件以调用 filterChange() 方法。 writeToLog() 方法调用仅用于输出目的。

    function filterChange() {
    var filterClasses = [];
    for(var i = 0;i<elements.length;i++) {
        writeToLog('Pushing ('+elements[i].value+') into filter class variable.');
        filterClasses.push(elements[i].value);        
    }

在函数的第一部分，我获取所有选择过滤器选项值并将它们放入一个数组中。

    writeToLog('Filter classes: ' + filterClasses);
    var rows = document.getElementsByClassName('row')
    writeToLog('Row count: ' + rows.length);

然后我获取网格中的所有行并开始遍历它们:

    for(var j = 0;j<rows.length;j++)
    {
        writeToLog('Checking row: ' + rows[j].className);
        var rowIsHidden = false;

一旦我有了一行，我就会在循环中迭代数组中的过滤器类，看看这一行的类是否有它。如果不是，我将 rowIsHidden 设置为 true，否则它保持为 false。

        for(var k = 0;k<filterClasses.length;k++)
        {
            writeToLog('Checking for class: ' + filterClasses[k]);
            if(rows[j].className.indexOf(filterClasses[k]) < 0)
            {
                writeToLog('Class not found, hide this row.');
                rowIsHidden = true; 
                break;
            }
        }

在循环移动到下一行之前，我根据 rowIsHidden 值设置显示样式。

        writeToLog('Row is hidden: ' + rowIsHidden);
        rows[j].style.display = rowIsHidden ? 'none' : 'block';

    }
}

无论如何，这可以被清理和优化，但我认为意图和逻辑是相当清晰的。希望这会有所帮助，并随时质疑其中的任何一个:)