jquery.dataTables 在 ie 11 中非常慢

Posted 2023-05-07

【中文标题】jquery.dataTables 在 ie 11 中非常慢

【英文标题】：jquery.dataTables very slow in ie 11

【发布时间】：2014-09-04 21:40:20

【问题描述】：

一位用户报告了一个奇怪的问题，升级到 ie 11 后，jquery.dataTables 的渲染速度非常慢（20 - 40 秒）。大约有 400 个结果，这似乎是合理的。它在 Chrome 和 FF 中运行得非常快。

经过一番深入研究后，发现任何对 table sorter 的调用都会导致服务器运行缓慢。

我们使用的是 1.9.4，尽管升级到 1.10 的尝试也没有显示出任何性能改进。

代码很简单：

$('#results_table').dataTable(
        "aoColumnDefs": [
             "bSortable": false, "aTargets": [ 0, 1, 12 ] ,
             'sType': 'currency', 'aTargets': [8] 
        ],
        "aaSorting": [[19, 'asc'], [18, 'asc'], [16, 'desc'], [4, 'desc'], [13, 'desc'], [5, 'desc'], [14, 'desc'], [15, 'desc'], [3, 'asc'], [6, 'desc']]
    );

欢迎任何关于改进的想法。

【问题讨论】：

它在 FF 和 Chrome 中的执行时间不到一秒。在 IE 中 40 秒。这似乎更像是一个特定的错误，而不是一般的缓慢。

【参考方案1】：

这并不完全是一个修复，但它是一个很好的解决方法。我切换到构建数据数组并将其附加到 dataTables 而不是构建 dom 元素。

例子：

$('#results_table').dataTable(
  "aaData":[[attrs], [attrs]], // an array of row data
   "aaSorting": [[19, 'asc'], [18, 'asc']],
   "aoColumns": [
        "sClass": "center" ,
       //... other class definitions
    ]
);

【讨论】：

您从中看到了多少速度提升？

我在 IE 上尝试了 4 秒，现在需要 2 秒。更快，但 firefox 和 chrome 仍然可以在一秒钟内完成。我只处理超过 2000 条记录。

我的实际从 30 秒缩短到了 1 秒。不知道有什么区别。

我添加了延迟渲染选项，这使它下降到 0.5 秒。这是一个丑陋的修复，但它确实有效，直到出现更好的修复。