React 中的速度比较:用于列排序的分页表与可滚动表

IT技术 javascript reactjs performance pagination
2021-04-26 09:35:06

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

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

  • 在分页的情况下,由于我只渲染10 条记录/页,渲染会很快。
  • 对于 Scrollable 表,由于我要渲染整个5000 条记录,因此渲染速度会很慢。

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

在这两种情况下,我可以了解哪些优化?

跟进:-

如果我无论如何要进行表格分页,我真的需要react窗口react虚拟化吗?

2个回答

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

但是,如果您使用虚拟化或窗口等概念,并且仅呈现视图中的数据量,则性能差异很小。这是更快和优化。

现在,如果您从 UX 的角度来看。与可滚动表相比,用户可能会找到列排序更高效的分页表。

three main reasons因为如此,我会使用按列排序的分页表

  • 当用户想要访问旧数据而不是一直向下滚动到它时,用户可以更轻松地跳转页面。这是对我来说最有力的理由之一
  • 当您使用分页并且用户决定更改排序顺序时,如果您也决定,保持滚动可能会变得更加棘手。然而,分页进行得很顺利。要么保持在同一页面上,要么移动第一个。在任何一种情况下都很容易实现
  • 如果您的数据增长,将所有数据保存在客户端可能会成为一种开销。在这种情况下,最好依赖 API 来获取数据。现在,随时随地获取数据的虚拟化有时会变得棘手,需要特别注意和预取细节

简而言之,由于用户体验和大表的实现原因,最好使用分页

我认为这里的优化不是问题,两种方式都可以以相同的性能完成。

您提到react-virtualized- 通常将其用作具有良好性能的可滚动表的解决方案,它使您能够仅呈现实际需要的这些字段。