Javascript 在不阻塞UI的情况下呈现d3.js html表

我正在使用生成表。 我的问题是，对于非常大的表（超过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;
}

我推荐这种情况

我敢肯定，对于速度更快的计算机，冻结可能不会发生，但为了防止其他情况发生冻结，为什么不提供一个UI块功能，可以阻止包含D3.js表的元素，或者干脆阻止整个页面（如果表有多大的话）

这样，在渲染之前，用户不需要看到所有内容都冻结，然后您就可以

$.unbui（）解锁所有内容

我还想看一看可以加快渲染速度的检查表。
尝试在中构建表，然后立即将文档片段添加到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次重新绘制。
按块，您的意思是当所有内容都在渲染时浏览器会冻结吗？或者你的意思是有一个故意的UI锁来阻止用户做任何事情？我是指无意的UI锁。浏览器冻结了一段时间。