javascript - 调整响应式数据表的大小非常慢，如何加快速度？

Question

我有一个数据表，其中有几千条记录。

我有它的响应式插件，并且响应式选项已启用。

我还尝试启用 deferRender 选项，但这似乎对所花费的时间没有影响。

当我调整浏览器大小时，会有 1 秒到 2 秒的延迟。这种情况发生在 IE11 和 MS Edge 中。 Chrome 中的性能并不出色，但 0.5 秒的时间还算可以接受。

我正在使用自定义排序函数，但为了简洁起见，省略了这些函数。我相当确定我知道问题出在哪里，但问题不在他们身上。如果需要的话我可以提供。

这是我的初始化代码:

this._dataTable = $("#listtable").DataTable({
    paging: true,
    responsive: true,
    deferRender: true,
    columns: [{
        title: "Name",
        data: "thing.name"
    }, {
        title: "State 1",
        data: "state1",
        type: "state1",
        render: (data, type, row, meta) => {
            return this._renderState1(data, meta);
        }
    }, {
        title: "State 2",
        data: "state2",
        type: "state2",
        render: (data, type, row, meta) => {
            return this._renderState2(data, meta);
        }
    }]
});

我通过为每个项目调用 dataTable.row.add 来加载数据，然后在最后调用 dataTable.draw。

性能问题发生在所有数据成功加载之后，所以我认为这与此无关。

进一步深入分析器信息，我发现问题在于行的呈现:

通过注释掉初始化代码中显示的自定义渲染函数中的代码，我发现问题在于查找包含单元格来设置背景颜色:

var cell = this._dataTable
    .cell({ row: meta.row, column: meta.col })
    .node();

这是设置背景颜色的其余代码:

var cellClass = this._getStateClass(state);
$(cell).addClass(cellClass);

如果我注释掉单元格检索行，那么性能并不惊人，但可以接受。

所以我的问题是如何在保持响应性能的同时为单元格提供自定义背景颜色？

可以快速替代 dataTable.cell，就像设置背景颜色的替代方法一样。

Answer 1

我成功地解决了这个问题，不再需要寻找单元格。

我在列上放置了一个类，删除了它们所具有的填充。

风格:

.cell-state1 {
    padding: 0;
}

配置:

this._dataTable = $("#listtable").DataTable({
    paging: true,
    responsive: true,
    deferRender: true,
    columns: [{
        title: "Name",
        data: "thing.name"
    }, {
        title: "State1",
        data: "state1",
        type: "state1",
        className: "cell-state1",
        render: (data, type, row, meta) => {
            return this._renderState1(data, meta);
        }
    }]
});

然后我更改了渲染函数，以便它们返回填充单元格的 div 中的内容，具有背景颜色，并重新添加填充。

风格:

.cell-state1-somestate {
  height: 100%;
  width: 100%;
  padding: 8px;
  background-color: #000000;
  color: #ffffff;
}

渲染函数:

function _renderState1 (state1) {
    var cssClass = _this._getState1CellClass(state1);
    var text = _this._getState1CellText(state1);
    var content = "<div class='" + cssClass + "'>" + text + "</div>";
    return content;
};

这给我留下了最后一个问题。

我有自定义订单函数，现在不是传递文本值，而是传递包含文本值的 div。

我使用了一点 jQuery 来提取文本:

varFloodAlertSeverity = $(content).html();.

如果订单函数接收到原始数据而不是渲染数据，那就太好了，但是哦，好吧。