创建大型表的 Javascript 性能

Question

我有一个数据库表。我希望用户能够通过 Web UI 修改该表中的值。

因此，我让我的后端检索表的值，通过 JSON 将它们传递到我的 Javascript。我的 Javascript 构建代表表格行的对象，然后使用原型(prototype)模板从数据生成 HTML 表格行。

this.varietyRowTemplate = new Template(
        "<tr class='#{stockLevel}'>" +
        "<td class='name'>#{name}</td>" +
        "<td class='source'>#{source}</td>" +
        "<td class='colour'><span class='colour'>#{colour}</span><input class='colour hiddenInput' type='text' value='#{colour}' /></td>" +
        "<td class='type'><span class='type'>#{type}</span><input class='type hiddenInput' type='text' value='#{type}' /></td>" +
        "<td class='packetSize'><span class='packetSize'>#{packetSize}</span><input class='packetSize hiddenInput' type='text' value='#{packetSize}' /></td>" +
        "#{yearCells}" +
        "<td class='total'>#{localStock}</td>" +
        "<td class='inventoryUpdate'><input class='inventoryUpdate' type='button' value='Update'/></td>" +
        "</tr>");
...
...
    //For every variety in the object array, add a row to the table
    tableString += this.varietyRowTemplate.evaluate(variety);

然后我将容器的 innerHTML 设置为表字符串

tableContainer.innerHTML = tableString;

表格有 2,000 行，每行 15 个单元格，每行约 10 个输入元素，以及约 15 个 span 标签，这需要我一分多钟。

有没有更快的方法来生成和填充大表？我是否应该放弃一次显示所有 2,000 行并将其分成几页的尝试？ (注意 - 将表增加到 25 行，因为它们加载是 Not Acceptable ，因为最后一个元素仍需要一分钟才能加载)。

Answer 1

我要做的是将数据存储在您的浏览器中，这很简单，然后一次显示一个大约 100 行的表格。使用 Array.sort() 按列对数据进行排序(向其传递不同数据类型的排序函数)并记住您所在的页面，这样它就不会总是重置为顶部或底部。我已经使用 5K 行数据轻松完成了这项工作，而且速度快如闪电。

我使用的另一个技巧是使用单个表行和每列一个 TD。然后我用一堆数据容器填充每个 TD，注意确保它们的高度相同。这样就形成了一个假表，但如果你做对了，用户就无法分辨。它比渲染所有这些行快几个数量级。