分页实践:前后端多种分页方式实现对比

举报
张俭 发表于 2023/12/16 16:19:16 2023/12/16
【摘要】 在软件开发中,分页没有统一的规范,实现方式也各不相同,有的会返回总页数,有的会返回总条数,有的可以任意翻页。本文对比一下几种常见的分页方式。总体来说,分页的实现方案分为四种:后端全部返回,由前端分页limit offset方案cursor方案cursor方案与offset结合 后端全部返回,由前端分页前端后端请求资源集数据返回全部数据前端后端前端功能支持情况显示总页🙂任意页码跳转🙂跳转附...

在软件开发中,分页没有统一的规范,实现方式也各不相同,有的会返回总页数,有的会返回总条数,有的可以任意翻页。本文对比一下几种常见的分页方式。

总体来说,分页的实现方案分为四种:

  • 后端全部返回,由前端分页
  • limit offset方案
  • cursor方案
  • cursor方案与offset结合

后端全部返回,由前端分页

前端后端请求资源集数据返回全部数据前端后端
前端功能 支持情况
显示总页 🙂
任意页码跳转 🙂
跳转附近数页 🙂
大量数据集 😭完全不可用
实现难度 简单

limit offset方案

前端后端请求满足条件的资源总数返回满足条件的资源总数请求资源集数据、PageNo部分数据前端后端
前端功能 支持情况
显示总页 🙂
任意页码跳转 🙂
跳转附近数页 🙂
大量数据集 😭海量数据集下性能差
实现难度 相对简单

cursor方案

前端后端请求满足条件的资源总数返回满足条件的资源总数请求资源集数据、cursor、limit部分数据、prevCursor、nextCursor前端后端
前端功能 支持情况
显示总页 🙂
任意页码跳转 😭
跳转附近数页 🙂
大量数据集 🙂
实现难度 相对复杂

如果每一次翻页都返回总页数的话,对性能来讲也是不小的开销。

相对动态的数据来说,如果不一直翻到没有数据为止,也不好确定是否到了最后一页。为了解决这个问题,以及跳转附近数页的问题,可以演进为这样的方案。

假定前端最多显示最近6页,每页50条数据,那么前端可以直接尝试预读300条数据,根据返回的数据来做局部的分页。一言以蔽之:读取更多的数据来进行局部分页。

cursor_preload.png

这里可以再简化一下前端的实现,添加offset参数,这样子前端只需要判断当前页前后数据条数是否足够,附近页的跳转可以通过携带offset字段请求得到。

cursor方案与offset结合

cursor_offset.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。