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

[tctc4869]

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

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

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

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

还有哪些其他的策略了？

[bylh]

@tctc4869 element 也没推荐这种分页吧，况且 100 万条呢，一般都是后端分页，返回数据的接口中带有总数量，方便前端知道共多少页

[xh520630]

https://element.eleme.cn/#/zh-CN/component/pagination
我把分页这里全部文字都看了一遍
也没看到你所谓他推荐的这种诡异方法

[galikeoy]

element 哪里推荐第 2 方式了？人家只有几条数据，给 demo 展示一下可以这样渲染而已

[littleylv]

就个分页而已有那么复杂么？
前端传参数 page=1&pageSize=20&order=xxx
后端根据前端的参数来取数据库

[xuanbg]

如果展示原始数据的话，难道不分页吗？几百万数据一次加载怕是要超时吧，都不用去想怎么渲染页面的问题了。

如果是需要对数据库里面的数百万数据进行查询分析的话，那需要先确定数据的维度和域吧，然后一步步钻取下一层数据

[telami]

这个问题无需争论啊，肯定是后端分页啊

[tctc4869]

@kisshere 数据库里的那个 cursor ？用一个游标对象搞定所有的分页吗？

[wwcxjun]

之前接手一个项目，一个列表的数据居然是一次性传过去再前端分页的，我当时就震惊了🙃

[saltedFish666]

哪有人会看那么多内容,一般人看几页就完了,这个分页应该业务限制,谷歌搜索也是有限制的

[tctc4869]

@xh520630
@wwcxjun
@galikeoy
我没有在 element 官网看，我现在实现的就是基于 start 和 number 的后端分页，我看到某些博客写的基于 element 的某些 t 数据表格的实现，其中有些话的含义是是“从后端拿到所有的数据，到前端再分页” 。

[whypool]

100w 数据直接扔给前端，这种后端不怕被凌迟么？

[diegozhu]

所有普通业务操作必须走后端分页接口。每次数据量不能超过 xxx 条。
所有批量输入输出业务（导入导出）必须走单独批量接口，一定要配单独权限，否则业务上容易出纰漏，技术上容易被搞。性能问题也好单独监控，单独优化。

[Lonersun]

分页还可以这样做，提取某个有序字段做排序，让前端传入最后一条的这个字段值，向后取多少条，这样性能应该会好些，比如按分页查询 user 表，有两种方案
方案一 [上文提到的，用的比较多的] ：
SELECT * FROM `user` ORDER BY id ASC LIMIT 100, 10;
方案二 [在数据量较大的情况下性能较好] ：
SELECT * FROM `user` WHERE id > 100 ORDER BY id ASC LIMIT 10;

[HowardTang]

誰會認真看完 100W 數據呢，這樣會造成各種各樣的浪費，丟給後端分頁

[YoRolling]

100 万数据全部丢在前端（浏览器？） 不会炸吗？

[Torpedo]

第一种。后端查、排序相关什么的都很完善了。
所谓性能无非就是比较
后端+网络耗时和前端自己做的时间
后端时间只包含查出数据，排序
前端的时间查数据、排序本来就很复杂，而且初始化这么多数据更耗时

而且一般 app 都是把服务端当做唯一数据源去同步数据。万一你的数据变动了，同步更麻烦了

[des]

@kisshere
用游标向上翻页你怎么办？
顺带，你如果说的是数据库的游标的话，游标的释放也是个问题，如果不及时释放，是会一直占用资源的

[fengbjhqs]

绝大部分都是第二种，而且为了用户体验，多端开发，接口复用，大部分计算功能应该都放在后端，

[fengbjhqs]

@tctc4869 #6 element 只是展示，让你知道用法，并没有推荐这种用法，element 应该是被前端主宰了，element 本身就是个前端项目

[tonytonychopper]

@tctc4869 感觉是你理解错了。