一个 Web 程序要查询较数据量大的集合数据到前端展示，当在 ui 体验和性能之间进行较好的取舍？

2019-12-18 09:01:09 +08:00
 tctc4869

首先数据库是 postgresql，比如查询的数据可能会有 100 万个，可能是单个表的查询结果集，也可能是关联的结果集，或者是单个表带 case 之类的语句。查询的结果集会直接在 postgresql 转换成 Json 数组字符串

（ 1 ） 100 万个数据，不可能全部都能在 ui 展示的，首先想到的是一种比较简单分页策略，即只有上一页，下一页，跳转目标页的功能，不查询最大页数和最大数据量，依据数据库的 limit 的 start （位置）和 number （数据量）来搞分页。这个分页策略有一个开发问题，就是前端和后端要配合好查询那部分的接口参数

（ 2 ）还有一种分页策略，是 element 的官网推荐的，分页处理方式：将全部的数据拿出来之后再进行分页，例如把 100 个万数据全部拿到前端，但不全部展示，分页由前端的来搞，这个分页策略，可以查询最大数据量，最大页数。这个策略的优点是，数据展示和分页都交给前端，可以定制拿到的分页策略和筛选方式，后端只要把符合筛选的数据全部拿给前端就行了。

这两种分页策略，哪类场景比较适合？是后面第二个比第一个综合来看更合适吗？

还有哪些其他的策略了？

8017 次点击
所在节点    程序员
72 条回复
itjesse
2019-12-18 11:00:09 +08:00
两个方案：
1. 分页
2. virtual list
fxy739371
2019-12-18 11:47:54 +08:00
这是什么傻子后端啊，想让前端做分页
love
2019-12-18 11:56:37 +08:00
我去，100 万数据做前端分页，以前我偷懒 2 万数据差点就卡死浏览器
lybcyd
2019-12-18 12:03:13 +08:00
默认肯定是后端做好分页，前端直接调用接口啊。前端分页只适合数据量很小的时候，比如一个内部系统，撑破天几十上百个用户，那这部分用户可以用前端分页展示。
wangyzj
2019-12-18 12:14:18 +08:00
谁说前端一次加载所有数据后分页就是 ui 体验好？
lihongjie0209
2019-12-18 12:56:05 +08:00
瞎搞, 你现在的瓶颈不是渲染的问题, 是用户打开你的页面就需要下载几十 MB json 的问题
OSF2E
2019-12-18 12:57:49 +08:00
前端按需发起请求，毕竟显示设备单次能够显示的内容有限。
后端根据前端请求，尽可能提高数据查询效率，这才是 b/s 层面交互体验该考虑的问题。

UI 层面的用户体验，不是后端应该考虑的问题，除非你同时负责视觉设计、交互设计、前端实现、后端实现等一系列工作，当今世界，能同时把这几方面做同样的高水准的人怕是没有多少。
Justin13
2019-12-18 13:03:46 +08:00
分页应该由后端来做，前端局限性很大
minigo
2019-12-18 13:47:33 +08:00
client side send PageSize 2 server side
server side response TotalCount & CurrentPageData
mikoshu
2019-12-18 13:54:04 +08:00
100 万条数据传输需要多久 然后前端目前的浏览器处理 100 万条数据的同时还得更改视图需要多久时间！！ 哥们你是疯了吗？？
glacial
2019-12-18 14:05:25 +08:00
首选后台要上数据库取 100w 条数据这是要时间的, 然后在不做任务数据转化的情况下 还得在序列化数据 这也得要时间，在然后把数据传给前端 这个时间还得跟你网速有关系，前端拿到了 还得做宣染，这得多耗时啊
queuey
2019-12-18 14:16:08 +08:00
假设一条数据有 100 字节，100W 数据也要 100M。你确定后台吃得消？？
orzorzorzorz
2019-12-18 14:20:16 +08:00
把数据全都缓存在客户端。一次看那么多数据，我觉得这客户也不需要电脑。
component
2019-12-18 14:42:58 +08:00
无性能消耗百万级 table----fixed-data-table-2 https://schrodinger.github.io/fixed-data-table-2/example-object-data.html
SjwNo1
2019-12-18 15:19:07 +08:00
100w 数据 小场面～ （不就炸嘛
jingcoco
2019-12-18 15:32:17 +08:00
vue js 如何搞并发提高性能...最近研究了半天.......我现在是觉得出路是学学 Rxjs............有大神给点资料吗..........
wanguorui123
2019-12-18 16:39:41 +08:00
后端分页+前端虚拟列表
Coolha
2019-12-18 16:42:24 +08:00
后端分页
saulshao
2019-12-18 16:45:28 +08:00
你不太可能从数据库查询 100 万行数据到前端页面，这和前端页面显不显示似乎没什么关系。
duanxianze
2019-12-18 16:59:22 +08:00
过于新手了 推荐自己尝试 不管前端后端 一下取出 100w 数据都是不可能的事

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/629998

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX