javascript - 渲染 d3.js html 表而不阻塞 UI

Question

我正在使用this code来生成表格。我的问题是，对于非常大的表格(超过 9000 个单元格)，我的 ui 完全阻塞大约 30 秒。

解决此问题的最佳解决方案是什么？

下面我重新粘贴生成表格的函数的代码:

function tabulate(data, header) {
    var table = d3.select("body").append("table").attr("class", "graph-key"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    thead.selectAll("tr")
    .data(header)
    .enter()
    .append("tr")
    .selectAll("th")
    .data(function(d) {return d;})
    .enter()
    .append("th")
    .attr("colspan", function(d) {return d.span;})
    .text(function(d) {return d.name;});

    // Create a row for each object in the data
    var rows = tbody.selectAll("tr")
    .data(data)
    .enter()
    .append("tr");

    // Create a cell in each row for each column
    var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {
                column: column,
                value: row[column]
            };
        });
    })
    .enter()
    .append("td")
    .html(function(d) {
        return d.value;
    });
    return table;
}

Answer 1

尝试在 Document Fragment 中构建表格，然后将文档片段一次性添加到 DOM 中。

类似于:

var docFrag = document.createDocumentFragment()
var table = d3.select(docFrag).append("table").attr("class", "graph-key"),
    thead = table.append("thead"),
    tbody = table.append("tbody");
[... the rest of your code should work ...]

然后，在您构建文档片段以获得您想要的表格后:

document.body.appendChild(docfrag)

此技术不应锁定 UI，因为锁定可能是由于不断为 9000 行中的每一行重新绘制 DOM。这只会触发 1 次重绘。