深度分页问题优化方案

问题原因

Mysql使用select * from table limit offset, rows分页在深度分页的情况下, 性能急剧下降。

例如:select * 的情况下直接⽤limit 600000,10 扫描的是约60万条数据,并且是需要回表 60W次,也就是说⼤部分性能都耗在随机访问上,到头来只⽤到10条数据(总共取600010条数据只留10条记录)

优化方案

前端方案:业务层面限制跨度比较大的跳页

提供2种风格分页器供用户选择

  1. 标准分页器,展示最后一页和跳转指定页输入框
    image.png
  2. 简单分页器
    image.png

参考
百度方案: 不展示最后一页和直接跳转指定分页的输入框
image.png
Google方案:只展示查看下一页的按钮
image.png

界面设计器选表格/画廊的属性面板提供分页器风格的属性下拉选择

image.png

xml示例
<!-- 表格使用的标准分页器 --> <view type="TABLE" paginationStyle="SIMPLE"> <!-- fields --> </view> <!-- 画廊使用默认的标准分页器 --> <view type="GALLERY" paginationStyle="STANDARD"> <!-- fields --> </view>

后端方案

  1. 使用索引:确保数据库表中的相关字段上创建了适当的索引。索引可以加快查询速度,特别是在处理大数据量时。

  2. 分批查询:将大数据分成多个较小的批次进行查询,而不是一次性查询全部数据。可以通过限制每次查询的数据量和使用合适的偏移量来实现分批查询,例如使用LIMIT和OFFSET子句。

  3. 基于游标的分页:使用基于游标的分页技术,而不是传统的偏移分页。游标分页是通过记录上一次查询的游标位置,在下一次查询时从该位置开始获取新的数据,避免了大偏移量的影响。这可以通过数据库自身的功能(例如MySQL的CURSOR)或使用第三方库来实现。

  4. 缓存数据:如果数据变化较少,可以考虑将查询结果缓存到内存中,以避免频繁地查询数据库。这样可以提高页面相应速度,并减轻数据库负担。缓存的数据应该根据业务需要及时更新。

  5. 数据预处理:如果查询结果经常需要进行复杂的计算或处理,可以考虑提前对数据进行预处理并缓存结果,以减少每次查询的计算负担。

  6. 数据库优化:针对具体数据库系统,可以根据实际情况进行数据库调优。例如,合理设置数据库连接池大小、调整数据库参数等。

  7. 分布式存储和计算:对于非关系型数据库或分布式存储系统,可以考虑使用分布式存储和计算方案,将数据分散存储在多个节点上,并通过计算节点并行处理查询请求,以提高性能和可伸缩性。

参考链接

MySQL深分页场景下的性能优化

Oinone社区 作者:原创文章,如若转载,请注明出处:https://doc.oinone.top/other/75.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
's avatar
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • 正式版发布:Oinone 5.3.0 版本 新增微流设计器,邀您体验

    版本号: 5.3.0 版本发布日期:2024.12.05更新要点:新增微流设计器 5.3.0 版本 升级说明及步骤(已升级为5.0.0版本忽略) 5.3.x版本以后无法通过4.7.8版本进行升级,请先升级到5.2.x版本进行权限迁移后再升级至5.3.x版本 升级内容(5.3.0) 设计器yaml配置 pamirs: boot: modules: – microflow_designer 请尽可能保证业务工程前后端服务以及设计器同步升级前端服务仅需重新执行npm run clean && npm install即可自动升级到最新版本 后端版本包信息 Oinone平台部署及依赖说明(v5.0) 未使用到的版本号请忽略,按项目中使用到的进行替换。 <!– 平台基础 –> <oinone.version>5.3.0</oinone.version> <!– 设计器 –> <pamirs.workflow.designer.version>5.3.0</pamirs.workflow.designer.version> <pamirs.model.designer.version>5.3.0</pamirs.model.designer.version> <pamirs.ui.designer.version>5.3.0</pamirs.ui.designer.version> <pamirs.data.designer.version>5.3.0</pamirs.data.designer.version> <pamirs.dataflow.designer.version>5.3.0</pamirs.dataflow.designer.version> <pamirs.eip.designer.version>5.3.0</pamirs.eip.designer.version> <pamirs.microflow.designer.version>5.3.0</pamirs.microflow.designer.version> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi</groupId> <artifactId>oinone-bom</artifactId> <version>${oinone.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> oinone-bom详细版本信息 <!– 平台基础 –> <pamirs.middleware.version>5.2.3</pamirs.middleware.version> <pamirs.k2.version>5.3.0</pamirs.k2.version> <pamirs.framework.version>5.3.0</pamirs.framework.version> <pamirs.boot.version>5.3.0</pamirs.boot.version> <pamirs.distribution.version>5.3.0</pamirs.distribution.version> <!– 平台功能 –> <pamirs.metadata.manager>5.3.0</pamirs.metadata.manager> <pamirs.designer.metadata.version>5.3.0</pamirs.designer.metadata.version> <pamirs.core.version>5.3.0</pamirs.core.version> <pamirs.workflow.version>5.3.0</pamirs.workflow.version> <pamirs.workbench.version>5.3.0</pamirs.workbench.version> <pamirs.data.visualization.version>5.3.0</pamirs.data.visualization.version> <!– 设计器 –> <pamirs.designer.common.version>5.3.0</pamirs.designer.common.version> <pamirs.flow.designer.base.version>5.3.0</pamirs.flow.designer.base.version> 前端版本包信息 { "@kunlun/vue-dependencies": "5.3.0", "@kunlun/vue-ui-antd": "5.3.0", "@kunlun/vue-ui-el": "5.3.0", "@kunlun/vue-mobile-dependencies": "5.3.0", "@kunlun/vue-ui-mobile-vant": "5.3.0", "@kunlun/mobile-workbench": "5.3.0", "@kunlun/data-designer-open-pc": "5.3.0", "@kunlun/data-designer-open-mobile": "5.3.0" } 前端详细版本信息 可通过node_modules/@kunlun查看 { "@kunlun/cache": "5.3.0", "@kunlun/dsl": "5.3.0", "@kunlun/event": "5.3.0", "@kunlun/expression": "5.3.0", "@kunlun/meta": "5.3.0", "@kunlun/request": "5.3.0", "@kunlun/router": "5.3.0", "@kunlun/service": "5.3.0", "@kunlun/shared": "5.3.0", "@kunlun/spi": "5.3.0", "@kunlun/state": "5.3.0", "@kunlun/theme": "5.3.0", "@kunlun/engine": "5.3.0", "@kunlun/vue-admin-base": "5.3.0", "@kunlun/vue-admin-layout": "5.3.0", "@kunlun/vue-dependencies": "5.3.0", "@kunlun/vue-router": "5.3.0", "@kunlun/vue-ui": "5.3.0", "@kunlun/vue-ui-antd": "5.3.0", "@kunlun/vue-ui-common": "5.3.0", "@kunlun/vue-ui-el": "5.3.0", "@kunlun/vue-widget": "5.3.0", "@kunlun/vue-expression": "5.2.0", "@kunlun/vue-mobile-base": "5.3.0", "@kunlun/vue-mobile-dependencies": "5.3.0", "@kunlun/vue-ui-mobile-vant": "5.3.0", "@kunlun/mobile-workbench": "5.3.0", "@kunlun/data-designer-core": "5.3.0", "@kunlun/data-designer-core-mobile": "5.3.0", "@kunlun/data-designer-core-pc": "5.3.0", "@kunlun/data-designer-open-mobile": "5.3.0", "@kunlun/data-designer-open-pc": "5.3.0" } 镜像说明 所有镜像均使用docker manifest支持amd64和arm64架构。如镜像拉取过慢,可在对应镜像Tag添加-amd64、-arm64后缀获取单一架构镜像。 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.3:5.3.0-amd64 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.3:5.3.0-arm64 镜像拉取 镜像或JAR版本:5.3.0 体验镜像:(所有中间件及前后端服务,包含全部设计器) docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.3:5.3.0 部署镜像:(包含前后端服务,包含全部设计器) docker pull harbor.oinone.top/oinone/oinone-designer-mini-v5.3:5.3.0 流程设计器镜像:(包含前后端服务,仅包含流程设计器) docker pull…

    2024年12月5日
    1.0K00
  • 【界面设计器】组件开发常见问题

    如何获取当前页面中的全部可用字段? 在Class Component(ts)中使用以下代码获取当前设计组件实例 “` tsimport { WidgetInstance } from &#039;@kunlun/ui-designer-dependencies&#039;; @Widget.Reactive()@Widget.Inject()protected currentInstance: WidgetInstance | undefined;“` PS:这里使用了@kunlun/ui-designer-dependencies依赖包中的类型定义,但没有使用函数,因此这个导入是可以正常执行的。 在Vue组件中使用以下代码获取可选字段列表 “` tsimport { WidgetInstance } from &#039;@kunlun/ui-designer-dependencies&#039;; // props add currentInstance defineprops: { currentInstance: { type: Object as PropType<WidgetInstance> }} // setup using currentInstance get fieldsconst fields = computed(() => { return Array.from(props.currentInstance?.root?.fieldCollection.values() || []).map((v) => { return { label: v.element?.widgetData?.displayName, value: v.element?.name }; });});“` PS:这里的v.element?.widgetData?.displayName获取的是字段的元数据显示名称,如果需要获取字段输入的标题可以使用v.element?.properties?.label。 为什么需要选择当前页面中的字段? 页面在发起请求时,会根据当前视图中的字段查询最小结果集,不在页面中的字段无法被正确获取。可以将用到的字段拖放至视图中,并使用【隐藏】属性进行隐藏即可。 列内容超过当前表格行高该怎么办? 在界面设计器中选中表格组件,可以为表格设置指定的行高。 在界面设计器的属性面板组件中,如何获取当前字段所在模型的模型编码? “` tsinterface InternalMetadata { model?: string;} @Widget.Reactive()protected get currentModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.model;}“` 在界面设计器的属性面板组件中,如何获取关联关系字段的关联模型的模型编码? “` tsinterface InternalMetadata { modelReferences?: { model?: string; };} @Widget.Reactive()protected get referenceModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.modelReferences?.model;}“` 如何理解关联关系字段中的【透出字段(选项字段列表)】属性? 正如我们现在已知的,页面发起查询请求时,将根据页面中的元数据获取最小结果集,不在页面中的字段并不包含在结果集中。这样虽然使得我们可以最小化的控制结果集的大小。 但对于关联关系类型的字段来说,我们也面临了一个无法回避的问题:对于【表格】、【表单】等这些组件,我们可以通过拖放字段的方式直接将字段展示在页面中,因此对于这些可被设计的组件而言无需其他过多的配置即可正常使用。但对于【下拉单选】、【下拉多选】等这些组件而言,我们无法在页面中直接定义关联关系字段的元数据。 我们在解决这一问题上也同样做了很多,比如当你在【下拉单选】中设置【选项标题】时,选项标题中的字段会被自动透出到页面中,在发起请求时也就能正常获取这些字段了。 特殊的是,如果某些字段只是在逻辑上被使用的,但又不能将其通过【选项标题】展示给用户的时候,我们必须使用一个属性来定义这些字段,使得我们的业务逻辑可以正常运行。因此,我们设计了【透出字段】来解决这一问题。 为什么在属性面板中的【选项字段列表】是【透出字段】呢? 正如我们在业务开发过程中,服务端的模型定义的显示名称和在界面设计器中的字段标题可以是不一致的。由于服务端模型定义的字段API名称为optionFields,其中文直译是【选项字段列表】,但我们在产品设计时,希望这一属性可以被用户理解,因此在页面上展示的时候使用了【透出字段】作为标题呈现给用户。 在界面设计器中如何配置【透出字段(选项字段列表)】? optionFields在配置时使用的是字段的API名称,在关联关系属性定义时,允许使用.分隔的方式定义关联关系字段的关联属性。 如:[‘code’, ‘name’, ‘user.code’, ‘user.name’]。其中user字段为多对一(M2O)的关联关系字段,其中有两个字段code和name。 与之对应的GQL响应结构为: query { xxxxxxQuery { queryPage(xxxxxx) { content { code name user { code name } } } } } 在界面设计器的属性面板组件中,如何通过代码方式设置【透出字段(选项字段列表)】? @Widget.Method() public setOptionFields(optionFields: string[]) { this.formData.optionFields = optionFields; } 如何在字段中使用mountedCallChaining提供mountedProcess方法? @Widget.Reactive() @Widget.Inject() protected mountedCallChaining: CallChaining | undefined; protected mountedProcess() {} protected mounted() { super.mounted(); this.mountedCallChaining?.hook(this.path, async () => { await this.mountedProcess(); }); } protected unmounted() { super.unmounted(); this.mountedCallChaining?.unhook(this.path); }

    2023年11月1日
    1.8K00
  • TableWidget 与 FormWidget 浅析

    前言:本文主要聚集于 TableWidget和 FormWidget,对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同,TableWidget与 FormWidget有着明确的目的,比如 TableWidget就是作为一个表格视图,这种名称中可以看得出来。其将表格的一系列能力聚拢,如单元格,行列选择排序,翻页等等; TableWidget 我们使用表格到底是在使用什么? 在我们讲述渲染流程前,我们需要提一个问题,在我们使用表格组件时,我们在使用什么,换而言之,我们对表格组件中关注的是什么?应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题,让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable,如 allowRowClick,rowClickMode等等,这些值会作为 Props 传递给 DefaultTable,DefaultTable则一定意义上充当了一个桥接层,主要做了两件事,处理 Props, 处理 Slot,TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合,创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot,比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后, props与 slot会进一步交给 OioTable进行渲染,OioTable则会进一步聚合处理,比如如果没有 defaultSlot则进行空值的渲染,如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构,而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget,其负责组装 DefaultTableColumn渲染所需要的 props,然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态,不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合, Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后,不可避免的会有数据交互,比如分页,排序,过滤等,这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等,TableWidget会将事件作为 props 向下注入,当事件被调用,TableWidget会进行处理,比如发起请求,或者对内部数据排序等。而除了数据的展示,还有一些动作,即 Action ,Action 被触发时会按照内部的配置进行工作,比如编辑时,将获取 activeRecord,随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样,也是作为一个渲染模块,但是它与 TableWidget不同的是,FormWidget是作为一个表单视图,其将表单的一系列能力聚拢,如表单提交,表单校验,表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别,比如 FormWidget没有提供翻页,排序,过滤等能力,因为这些能力属于表格的能力,而 FormWidget则更关注于表单的能力。提供了数据的存储,提交,校验等能力 Form 在渲染时流程与 Table 大同小异,其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染,不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西,当页面上的控件发生变化,其变更的值会被收集到 FormData 中,并在后续中使用。同时在编辑已有数据场景下,Form 会将数据加载到 FormData,随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出,Table 侧重于数据的查询展示,Form 则侧重于数据的变动处理,但是抽象的看其核心其实是同一套逻辑,即数据的存储与展示,中间或许会有对数据的某些处理,但是并不是本质上的区别,两者在核心理念上是一致的,即让使用者只需要关心数据本身,而不需要关注于繁琐的视图构造,这是整个低代码甚至前端的发展方向。

    2025年3月25日
    96200
  • 自定义视图部分区域渲染设计器的配置

    自定义视图与界面设计器配置对接 在日常开发中,我们经常会遇到自定义视图的需求。自定义视图不仅需要与平台机制结合,还要实现与界面设计器中配置的字段和动作的无缝对接。本文将介绍如何将自定义视图与界面设计器中配置的字段和动作的无缝对接,实现字段和动作的渲染。 用大白话来讲就是:当前页面一部分是自定义的,一部分是设计器生成的 代码地址 目录 自定义表单视图与字段、动作的结合 自定义表格视图与字段、动作的结合 自定义表单视图与字段、动作的结合 首先需要在界面设计器配置好对应界面,虽然配置的页面样式跟期望展示的 UI 的不一样,但是数据的分发、汇总以及动作的交互也是一致的,所以我们可以通过自定义的方式替换这个页面的 UI,但是数据以及动作,是完全可以通过平台的能力获取的。 注册表单对应的 SPI // CustomFormWidget.ts import CustomForm from './CustomForm.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomFormWidget' }) ) export class CustomFormWidget extends FormWidget { public initialize(props: BaseElementObjectViewWidgetProps): this { super.initialize(props); this.setComponent(CustomForm); return this; } } <!– CustomForm.vue –> <template> <div class="custom-form-container"> <div class="custom-form-tip">自定义视图</div> </div> </template> <script lang="ts"> import { DslRender, DslRenderDefinition, PropRecordHelper } from '@kunlun/dependencies'; import { createVNode, defineComponent, onMounted, PropType, ref, VNode } from 'vue'; export default defineComponent({ inheritAttrs: false, props: { formData: { type: Object as PropType<Record<string, any>>, default: () => ({}) } } }); </script> 在上述的代码中,我们继承的是 FormWidget,那么这个页面会自动发起对应的请求,所有的数据都在 formData 中。 表单视图渲染动作 在最开始我们讲到过,当前页面是在界面设计器配置过,所有在CustomFormWidget里面是可以拿到当前页面配置的元数据信息,所以我们可以拿到界面设计器配置的字段跟动作 /// CustomFormWidget.ts @Widget.Method() protected renderActionVNodes() { // 从dsl中获取actionBar,actionBar里面包含了界面设计器配置的动作 const actionBar = this.metadataRuntimeContext.viewDsl?.widgets.find((w) => w.slot === 'actionBar'); if (actionBar) { // actionBar.widgets 就是界面设计器配置的动作,借助平台提供的DslRender.render方法,将对应的dsl转换成VNode return actionBar.widgets.map((w, index) => DslRender.render({ …w, __index: index }) ); } return null; } 因为 renderActionVNodes 方法返回的是 VNode,所以我们必须借助 vue 的 render 函数才能渲染。 <!– ActionRender.vue –> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, props: { renderActionVNodes: { type: Function, required: true } }, render() { return this.renderActionVNodes(); } });…

    2024年9月12日
    1.6K01
  • Oinone发布版本一览

    点击查看更多版本 20250312 为了更好的服务合作伙伴,便于所有发布版本可以有序迭代和升级,我们开始使用LTS(长期存储)版本对长期维护版本和镜像进行维护。 在未来的版本更新中,我们会将历史版本中需要长期保存版本标记为LTS,这个标记一般出现在一个新版本发布后的1-3个月。 LTS表示以下含义: 不再增加任何新特性的支持,这一点同第二位中版本号的维护一致。 不再主动修复高版本发现的已知BUG。 所有版本的修复迭代将统一使用第四位版本号进行维护,同时第三位小版本号不再更新。 版本迭代将长期使用同一篇发布日志进行维护,根据时间倒序追加在文档前。 7.x 注: 此版本需要使用JDK17环境进行开发和部署 Oinone平台部署及依赖说明(v6.3) 主要特性: 后端升级适配 JDK17 优化全平台界面交互 版本 发布日志 发布时间 主要更新内容摘要 备注 7.0.0 点击查看 20251217 升级 JDK17,优化全平台界面交互 6.x 注: 此版本为JDK8环境支持的最后一个长期存储和维护版本 Oinone平台部署及依赖说明(v6.3) 主要特性: 新增涡轮增加启动加速 新增AI设计器 新增虚拟字段 界面设计器支持下钻 Oinone 正式开源 工作流节点支持:拖拽、缩放、复制、剪切、粘贴等功能 工作流新增自动审批组件 EIP开放应用支持流控 集成设计器新增 MCP 流程设计器优化 优化全平台界面交互 版本 发布日志 发布时间 主要更新内容摘要 备注 6.4.0 点击查看 20251217 优化全平台界面交互 LTS 6.3.7 点击查看 20251217 集成设计器新增 MCP,流程设计器优化 6.3.0 点击查看 20250905 集成设计器新增 MCP,流程设计器优化 6.2.15 点击查看 20250905 Oinone 正式开源 6.2.0 点击查看 20250609 Oinone 正式开源 6.1.4 点击查看 20250612 新增AI设计器、虚拟字段 6.1.0 点击查看 20250418 新增AI设计器、虚拟字段 6.0.2 点击查看 20250418 新增涡轮增加启动加速 6.0.0 点击查看 20250312 新增涡轮增加启动加速 5.7.x 主要特性: 新增打印设计器 新增低无一体 版本 发布日志 发布时间 主要更新内容摘要 备注 5.7.4 点击查看 20250312 新增打印设计器、低无一体 LTS 5.3.x Oinone平台部署及依赖说明(v5.3) 主要特性: 新增微流设计器 版本 发布日志 发布时间 主要更新内容摘要 备注 5.3.9 点击查看 20250312 修复子表格导入导出权限控制异常的问题 LTS 5.3.8 点击查看 20250212 集成设计器支持文件集管理 5.3.7 点击查看 20250124 集成设计器支持文件集管理 5.3.6 点击查看 20250116 弹窗和抽屉新增全屏功能 5.3.5 点击查看 20250107 修复EIP参数转换异常的问题 5.2.x 主要特性: 界面设计器新增与其他设计器结合(调用工作流相关功能、调用集成设计器相关功能等) 流程设计器新增并发节点 数据可视化新增数据库、集成接口数据源 MSSQL(SQLServer)数据库方言支持 KDB(Kingbase8)数据库方言支持 版本 发布日志 发布时间 主要更新内容摘要 备注 5.2.21 点击查看 20250212 修复权限节点加载错误的问题 LTS 5.2.20 点击查看 20250116 修复动作上下文的value配置false不生效 5.2.19 点击查看 20250107 修复EIP参数转换异常的问题 5.2.18 点击查看 20241225 修复日期格式未根据语言配置转换的问题 5.1.x Oinone平台部署及依赖说明(v5.1) 主要特性: 新增元数据多环境在线发布功能 界面设计器新增菜单管理 系统设置新增多首页规则配置 版本 发布日志 发布时间 主要更新内容摘要 备注 5.1.17 点击查看 20241122 修复MQ注册时ConsumerGroup为空导致的异常 LTS…

    2024年8月24日
    3.8K00

Leave a Reply

Please Login to Comment