javascript - React : Paginated table vs Scrollable table for column sort 中的速度比较

Question

假设我们有两张表，一张是 Paginated ，另一张是 Scrollable 。两者都允许通过单击任何列标题对 的记录进行 排序。

假设该表有 5000 记录 6 列 。当用户单击任何列进行排序时，我的理解是整个 5000 记录将得到排序，我的表状态将得到更新。

在分页的情况下，由于我只渲染 10 条记录/页面 ，因此渲染会很快。

在 Scrollable 表的情况下，由于我正在渲染整个 5000 记录 ，因此渲染会很慢。

我有一个项目要提前完成，它可能涉及大量数据记录，并且列排序是一项强制性功能。我想验证我对这个用例的渲染速度的理解是否正确？

在这两种情况下都有哪些优化可供我了解？

跟进:-

如果我无论如何要对表格进行分页，我真的需要 react-window 或 react-virtualized 吗？

Answer 1

您认为分页表的渲染速度比使用 5000 行渲染的整个表更快是正确的。此外，由于 UI 中有大量元素，具有 5000 行的表格可能会导致浏览器速度变慢

但是，如果您使用虚拟化或窗口化等概念，而您只渲染 View 中的数据量，则性能差异非常小。这是更快和优化的。

现在，如果你来到 UX 的 Angular 。与可滚动表相比，用户可能会发现列排序效率更高的分页表。

有three main reasons因此，我会使用一个分页表，对列进行排序

用户在想要访问旧数据时更容易跳转页面，而不是一直向下滚动到它。 这是我最强烈的理由之一

当您使用分页并且用户决定更改排序顺序时，如果您也决定保持滚动可能会变得更加棘手。然而，分页顺利进行。要么留在同一页面上，要么移动第一个页面。无论哪种情况，都易于实现

如果您的数据增长，将所有数据保留在客户端可能会成为开销。在这种情况下，最好依靠 API 来获取数据。现在，在移动中获取数据的虚拟化有时会变得很棘手，需要特别注意和详细了解预取

简而言之，由于 UX 和大表的实现原因，最好使用分页