创建大型表时的 JavaScript 性能

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

因此，我让后端检索表的值，通过 JSON 将它们传递给我的 Javascript。我的 Javascript 构建表示表行的对象，然后使用原型模板从数据生成 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 个跨度标签的表，这需要我一分多钟的时间。

是否有一种更快的方法来生成和填充大型表？我是否应该放弃一次显示所有 2,000 行并将其分成几页的尝试？ （注意 - 在加载时一次增加表 25 行是不可接受的，因为最后一个元素仍需要一分钟才能加载）。

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

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