Javascript 调整响应数据表的大小非常慢，如何提高速度？

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

我有它的响应插件，响应选项已启用

我还尝试启用延迟渲染选项，但这似乎对所用时间没有影响

当我调整浏览器大小时，有1s-2s的延迟。这发生在IE11和MS Edge中。chrome的性能并不出色，但在0.5s时，性能还可以接受

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

这是我的初始化代码：

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);

以下是设置背景颜色的其余代码：

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

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

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

所以我的问题是，如何在保持响应性能的同时为电池定制背景颜色

---

dataTable.cell的快速替代方案可以，设置背景颜色的替代方法也可以。

我通过消除查找单元格的需要，成功地解决了这个问题

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

风格：

.cell-state1 {
    padding: 0;
}

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

配置：

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中的内容，该div填充单元格，具有背景颜色，并添加填充

风格：

.cell-state1 {
    padding: 0;
}

.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;
};

function\u renderState1（state1）{
var cssClass=\u this.\u getState1CellClass（state1）；
var text=_this._getState1CellText（state1）；
var content=“”+文本+”；
返回内容；
};

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

我有自定义的顺序函数，现在它们不是传递文本值，而是传递包含文本值的div

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

var floodAlertSeverity=$（content.html（）

如果order函数收到的是原始数据，而不是渲染数据，那就太好了。
我也遇到过类似的问题，IE11在响应模式下调整浏览器窗口的大小时速度变得非常慢，这造成了非常糟糕的用户体验

我没有时间也没有专业知识来解决根本的问题（可能只是IE11速度太慢），但我想出了一个优雅的方法来解决这个问题，基本上就是限制对调整列大小的函数的调用

IE11中的性能分析器显示对
\u的调用可以调整列大小（oSettings）
占用了大部分CPU时间，对该方法的调用由
'resize.DT YourTableNameHere'
事件触发，因此使用一个简单的计时器，我们可以延迟对该函数的调用，直到用户调整完窗口的大小：

var dtResizeTimer;
var allowPropagation = false;
$(window).on("resize.DT-visitsTable", function (event) {
    if (allowPropagation === false) {
        event.stopImmediatePropagation();
        clearTimeout(dtResizeTimer);
        dtResizeTimer = setTimeout(function() {
            allowPropagation = true;
            $(window).trigger("resize.DT-visitsTable");
        }, 100);
    } else {
        allowPropagation = false;
    }
});

显然，您需要将
visitsTable
替换为您给
table
元素的
id

在用户完成调整大小后，IE11仍然需要一秒钟来更新表，但至少现在调整大小本身是平滑的。也许有更好的解决方案，但现在，这平息了我对IE11的失望