javascript - 创建大型表的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个span标签，这花了我一分钟多的时间。

是否有一种实质上更快的方法来生成和填充大表？我应该放弃尝试一次显示所有2,000行并将其拆分为页面的想法吗？（请注意，每次加载25行，因为加载它们是不可接受的，因为最后一个元素仍然需要一分钟的加载时间，因此每次只能增加25行）。

最佳答案

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

我使用的另一个技巧是有一个表行和每列一个TD。然后，我在每个TD中填充一堆数据容器，并确保它们的高度相同。这样就构成了一个伪表，但是如果正确执行，用户将无法分辨出区别。它比呈现所有这些行快几个数量级。

的javascript

javascript - 创建大型表的JavaScript性能