大网格和大量使用 Spring / Angular / PrimeNG 的数据

Question

Web 应用程序中的大网格 - 我们的用例是呈现一个大约 120 列和不同行数（几千）的网格。需要指导：

最好的设计方式？ 性能 - 如何快速渲染和呈现网格中的数据？ 过滤功能——我们的用户需要过滤数据。我们显然已经在较小的网格上开发了过滤器功能......但在这个大网格上寻求建议。 我们目前正在使用 Angular 9（正在升级到 11）并使用 Prime NG。

我们应该把所有的数据都呈现在前端，让前端来管理数据/过滤等。还是看看服务器端的分页和过滤？

Answer 1

互联网上有很多与此主题相关的讨论和想法。但是没有明确的（我的意思是没有人是正确的）答案。这取决于具体情况。无论您选择什么，您都需要验证/测试，并可能重新考虑和更改解决方案。不同的“砖块”扮演着重要的角色，例如：

1. 例如所有 120 列的重要性是一样的，还是有些比其他更重要？ / 行的相同问题 -> 因此您可以在需要时延迟加载不太重要的数据。
2. 用户通常如何使用给定的数据表？就像只是查看/滚动和偶尔排序/过滤或典型的用户工作是过滤/排序？
3. 有多少用户会使用这个表？每个用户以不同的方式或类似的方式->因此您可以在后端缓存数据以不使数据库过载
4. 您会使用无限滚动还是分页器（同时搜索讨论和最佳做法）
5. 后端性能
6. 您的后端更改数据的频率
7. 您是 LAN 还是无线网络的典型用户？
8. ...

一般有三种基本解决方案：

1. 将所有数据加载到客户端并在客户端进行所有排序/过滤
2. 仅在后端进行排序/过滤（例如 Primeng 表 - 懒惰：https://primefaces.org/primeng/showcase/#/table/lazy）
3. 上述两者的某种组合 - 例如，您可以将所有列和特定数量的记录（默认值，例如 500 / 可由用户在客户端中配置）加载到客户端，并在需要时延迟加载下一个 X。

一些链接：

• Filters logic should be on frontend or backend?
• https://www.reddit.com/r/learnprogramming/comments/ba0jf1/should_data_filtering_be_done_backendfrontend
• 如果您使用的是 REST API：https://medium.com/@guillaume.viguierjust/paging-sorting-filtering-and-retrieving-specific-fields-in-your-restful-api-a0d289bc574a