一个 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 个万数据全部拿到前端,但不全部展示,分页由前端的来搞,这个分页策略,可以查询最大数据量,最大页数。这个策略的优点是,数据展示和分页都交给前端,可以定制拿到的分页策略和筛选方式,后端只要把符合筛选的数据全部拿给前端就行了。

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

还有哪些其他的策略了?

8020 次点击
所在节点    程序员
72 条回复
Dabaicong
2019-12-18 17:39:59 +08:00
简直扯淡。。。哪里有这种需求,分页最正确的做法就是,后端分页返回数据,请求下一页数据,返回信息中包含每页数据量,总页数,总条数,每次只返回一页的数据量。不提数据库每次试试
egfegdfr
2019-12-18 17:40:51 +08:00
送命题,选方案一
Dabaicong
2019-12-18 17:42:06 +08:00
不提数据库吃不吃得消,就算是每条 100 字节,每次 100m 流量,你吃的消 ?
finalwave
2019-12-18 17:45:21 +08:00
前端处理百万数据分页不算问题,后端 sql 加个 offset 和 limit 算开发问题,也是搞笑
peterjose
2019-12-18 18:11:07 +08:00
一百万全部展示就有 UI 体验了?
reticentfat
2019-12-18 18:17:32 +08:00
客户需要 100 万?
akira
2019-12-18 18:28:57 +08:00
这两种方法各自适合不同的应用场景。
方案一,在任何场景下,表现都很稳定。但是就需要前后端配合做一些额外的开发工作。
方案二,例如总条数在一百两百,每页显示 10-20 的话,那用方案二就挺舒服的。

但是在你这个场景下,推荐用方案二的人,不想评价。
lsk569937453
2019-12-18 18:48:11 +08:00
前端 js 性能满足不了的情况下,可以考虑 webassembly
xiangyuecn
2019-12-18 19:05:26 +08:00
楼主是来钓鱼的吧😂
JCZ2MkKb5S8ZX9pq
2019-12-18 21:15:04 +08:00
一般来说我们操作是用 id 替代分页,这样新增数据也不影响查询结果。
比如你看微博之类的分页,也是返回一个下次查询的起点标志。

但如果这 100 万条是管道多次操作之后的,那就比较麻烦了。
可以考虑把部分查询结果“固化”下来,根据场景生成新表,用空间换效率了。
imwalson
2019-12-18 22:42:04 +08:00
后端如果不肯做分页,前端自己拿 node.js 做也不难,绝对不能 100W 数据直接返回给 UI 端。
hiya5
2019-12-18 22:48:23 +08:00
参考社工库

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

https://tanronggui.xyz/t/629998

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

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

© 2021 V2EX