创建大表的 Javascript 性能 [英] Javascript performance with creating large tables

问题描述

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

I have a database table. I want the user to be able to modify the values in that table, through a web UI.

因此，我让我的后端检索表的值，并通过 JSON 将它们传递给我的 Javascript.我的 Javascript 构建表示表格行的对象，然后使用原型模板从数据中生成 HTML 表格行.

As such, I have my back-end retrieve the table's values, pass them to my Javascript through JSON. My Javascript builds objects representing table rows, and then uses prototype templates to generate HTML table rows, from the data.

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设置为表格字符串

I then set the container's innerHTML to the table string

tableContainer.innerHTML = tableString;

对于一个包含 2,000 行、每行 15 个单元格、每行约 10 个输入元素以及约 15 个 span 标签的表格，这需要我花费一分钟多的时间.

With a table of 2,000 rows, 15 cells per row, ~10 input elements per row, as well as ~15 span tags, this takes me over a minute.

是否有更快的方法来生成和填充大表?我是否应该放弃尝试一次显示所有 2,000 行，并将其分成几页?(注意 - 以每次 25 行的速度增长表格，因为它们加载是不可接受的，因为加载最后一个元素仍然需要一分钟).

Is there a substantially faster way to generate and populate a large table? Should I give up trying to display all 2,000 rows at once, and break it up into pages? (Note - growing the table at say, 25 rows at a time, as they load is unacceptable, because the last elements will still take a minute to load).

推荐答案

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

What I would do is store the data on your browser, which is trivial, then show a table of about 100 rows at a time. Sort the data by column using Array.sort() (pass it a sorting function for different data types) and remember which page you are on so that it doesn't always reset to top or bottom. I've done this easily with 5K rows of data and it's lightning fast.

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

One other trick I've used is having a single table row and one TD per column. Then I fill each TD with a stack of data containers, taking care to make sure they're the same height. That makes a faux table, but if you do it right the user can't tell the difference. It's orders of magnitude faster than rendering all those rows.

这篇关于创建大表的 Javascript 性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！