javascript – Tablesorter性能推荐？

我正在使用tablesorter Jquery插件来排序我的表.当表大小小于500行时,这通常可以正常工作.随着表中行数增长超过2K或3K,表页加载速度变得非常慢,并且基于表数据的后续过滤器也需要时间,当我输入时页面停止2-7秒过滤盒.几秒钟后,页面恢复正常,并带有过滤后的值.这是使用TableSorter插件的常规行为还是与我的代码有关的事情？有任何改善这种时滞的建议吗？

解决方法:

由于重(2K到3K行)DOM操作,性能下降.

为了提高性能,我可以看到以下可能性.

最小化DOM操作/访问

DOM操作/访问总是很昂贵.所以,尽量减少.

在TableSorter代码中,未标记 – 行号. 337：

for (var i = 0; i < totalRows; i++) {
    var pos = n[i][checkCell];
    rows.push(r[pos]);
    if (!table.config.appender) {
        var l = r[pos].length;
        for (var j = 0; j < l; j++) {
            tableBody[0].appendChild(r[pos][j]);
        }
    }
}

在上面的代码中,有两个嵌套的for循环.我们假设我们有2K行,并设置了table.config.appender.在最坏的情况下,appendChild可能会运行超过2K X 500次？

这只是一个例子.在这个地方而不是在每次迭代时追加子进程,获取行字符串并连接成结果字符串.在所有迭代之后,替换表中的文本.在这种情况下,我们只访问DOM一次.只有当我们在单元格中只有文本而没有任何事件绑定在单个单元格文本/元素上时,这才有效. (即使我们想要在单元格文本/元素上绑定事件,也有更好的方法).

但这需要TableSorter插件修改.

现代浏览器中的Web工作者

在运行JavaScript时,UI会冻结.因此,在我们的情况下,因为我们拥有大量数据,所以肯定需要花费一些时间来处理.如果我们将此数据处理移动到其他某个线程(或同时运行而不阻止UI),那么它会更好.

为此,我们可以使用Web Workers,旧版浏览器不支持它.

那么,TableSorter如何工作？加载表后,它将缓存所有数据.绝对不会为了获取数据而在每一行上进行迭代.触发任何过滤器后,它将开始处理数据以对行进行排序.此处理可以移动到Web Worker,它将取消冻结UI.虽然这是有效的,但我们可以显示一些漂亮的过滤…消息,同时用户可以玩其他元素.

我们可以检测当前浏览器是否支持Web Workers.如果是,那么我们可以在新线程中处理数据.

但这需要TableSorter插件修改.

使用Database Server

如果我们从数据库中提取数据并将其显示在前端表中,并且如果我们有大量数据,我们可以更好地要求服务器从数据库中获取已排序的数据并使用AJAX调用进行显示.

相信我,数据库服务器非常适合做这些事情.同时在进行AJAX调用时,我们可以显示一些处理,并且不会冻结UI.

这需要服务器端编程.

这些是我的想法.可能我更喜欢使用以上三种.我尽可能地减少DOM操作/访问.我在现代浏览器中使用Web Workers.在旧版浏览器中,我依赖于数据库服务器.肯定需要一些时间来实施.

标签：javascript,tablesorter
来源： https://codeday.me/bug/20190624/1281967.html