4

我正在使用 tablesorter Jquery 插件对我的表进行排序。这在表大小小于 500 行时正常工作。随着表中的行数增长到超过 2K 或 3K，表页面加载变得非常缓慢，并且对于基于表数据的后续过滤器也需要时间，以至于当我键入时页面会暂停 2-7 秒过滤盒。几秒钟后，页面恢复正常，过滤后的值。这是 TableSorter 插件的正常行为还是与我的代码有关的事情？有什么建议可以改善这种时滞吗？

4

1 回答 1

4

由于大量（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 Worker

运行 JavaScript 时，UI 冻结。因此，在我们的案例中，由于我们拥有大量数据，因此肯定需要一些显着的时间来处理。如果我们将此数据处理转移到其他线程（或同时运行而不阻塞 UI），效果会更好。

为此，我们可以使用Web Workers它，但旧浏览器不支持它。

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

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

但这需要修改 TableSorter 插件。

使用数据库服务器

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

相信我，数据库服务器已经为做这些事情做了很好的优化。此外，在进行 AJAX 调用时，我们可以显示一些处理，并且 UI 不会被冻结。

这需要服务器端编程。

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

于 2013-10-10T01:47:13.363 回答