Question

我有一个数据库表。我希望用户能够通过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行，因为它们加载是不可接受的，因为最后的元素仍然需要一分钟才能加载）。

Answer 1

我曾经有过类似的问题并用无限卷轴解决了它。

我发现通过将新行对象复制到tbody（使用DOM表API）而不是将html块附加到末尾（后者需要解析整个HTML）来增加表的增长速度要快得多每一次 - 因此你添加最后元素的糟糕体验）

希望这有帮助

Answer 2

我要做的是将数据存储在您的浏览器上，这是微不足道的，然后一次显示一个约100行的表。使用Array.sort（）按列对数据进行排序（为不同的数据类型传递排序函数）并记住您所在的页面，以便它不会始终重置为顶部或底部。我已经用5K行数据轻松完成了这项工作，而且速度非常快。

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

Answer 3

模板可能会从编码角度简化事情，但这会让您付出很多代价。首先，有搜索和替换操作来插入每个对象的值。然后是使用+ =运算符丢弃和创建越来越长的字符串对象集合的开销。最后，需要将innerHTML字符串解析为DOM文档片段，然后才能将其插入表中。

即使代码可能更冗长，使用DOM方法直接从评估的JSON对象创建和附加TR节点将会更快，如果您在可滚动区域中创建表，大多数渲染的内容将隐藏在用户之外（如果您愿意，可以根据用户的滚动按需完成 - 如果您走这条路线那么困难的部分就是猜测整个桌子的渲染高度，这样您就可以定位尽管表格不完整，但滚动拇指仍适当。）

创建大表的Javascript性能

3 个答案: