1. Oinone社区首页

深度分页问题优化方案

• • Uncategorized • 阅读 523

问题原因

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低代码应用平台体验

赞 (0)
的头像
0 0
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 「前端」动作API API&SDK 文档

    「前端」动作API

    概述 在 oinone 前端平台中，提供了四种动作 跳转动作（页面跳转、打开弹窗、抽屉） 服务端动作（调用接口） 客户端动作（返回上一页、关闭弹窗等） 链接动作（打开执行的链接） 快速开始 // 基础使用示例 import { executeViewAction, executeServerAction, executeUrlAction } from '@kunlun/dependencies'; // 示例 1: 基础页面跳转（去创建页面） executeViewAction(action); // 示例 2: 带参数的页面跳转（查询ID为123的数据）,去编辑、详情页 executeViewAction(action, undefined, undefined, { id: '123' }); // 示例 3: 页面跳转的参数，用最新的，防止当前页面的参数被带到下一个页面 executeViewAction(action, undefined, undefined, { id: '123' , preserveParameter: true}); // 示例 4: 调用服务端接口 const params = { id: 'xxx', name: 'xxx' }; await executeServerAction(action, params); await executeServerAction(action, params, { maxDepth: 2 }); // 接口数据返回的数据层级是3层 -> 从0开始计算, 默认是2层 // 执行链接动作 executeUrlAction(action); API 详解 executeViewAction 参数名 描述 类型 必填 默认值 — action 视图动作 RuntimeViewAction true router 路由实例 Router false undefined matched 路由匹配参数 Matched false undefined extra 扩展参数 object false {} target 规定在何处打开被链接文档（可参考 a 标签的 target） string false undefined executeServerAction 参数名 描述 类型 必填 默认值 ​action 服务端动作 RuntimeServerAction true param 传递给后端的参数 object true context 配置接口返回的数据层级（默认是两层） {maxDepth: number} false executeUrlAction 参数名 描述 类型 必填 默认值 ​action 链接动作 IURLAction true

    汤乾华的头像 汤乾华
    2025年3月21日
    82500
  • 5.3.0版本bugfix：修复日期格式未根据语言配置转换的问题，请升级对应版本 5.x

    5.3.0版本bugfix：修复日期格式未根据语言配置转换的问题，请升级对应版本

    版本号： 5.3.4 版本发布日期：2024.12.25更新要点：修复日期格式未根据语言配置转换的问题 5.3.0 版本 升级说明及步骤（已升级为5.0.0版本忽略） 5.3.x版本以后无法通过4.7.8版本进行升级，请先升级到5.2.x版本进行权限迁移后再升级至5.3.x版本 升级内容（5.3.0） 修复日期格式未根据语言配置转换的问题（管理中心/工作流） 修复SQLRecord在一个事务中Insert和Update修改同一条数据的问题 修复流程设计器请求的模块名称错误的问题 修复界面设计器在添加表格双击触发动作时无法正确打开弹出框的问题 修复工作流加签转审字段长度问题 修复流程设计器分支下汇聚节点丢失的问题 大概率减小，导入导出元数据OOM的问题 修复审批人会收到多余的一封站内信问题 修复界面设计器m2o详情页缺少属性配置的问题 修复界面设计器表格日期字段展示了时间、表格时间字段展示了日期 修复数据权限中的表达式使用源码模式后页面卡死的问题 修复工作流自定义抄送人 修复工作流icon显示异常的问题 修复MQ未正确处理PamirsSession的问题 请尽可能保证业务工程前后端服务以及设计器同步升级前端服务仅需重新执行npm run clean && npm install即可自动升级到最新版本 后端版本包信息 Oinone平台部署及依赖说明（v5.1） 未使用到的版本号请忽略，按项目中使用到的进行替换。 <!– 平台基础 –> <oinone.version>5.3.4.2</oinone.version> <!– 设计器 –> <pamirs.workflow.designer.version>5.3.0</pamirs.workflow.designer.version> <pamirs.model.designer.version>5.3.2</pamirs.model.designer.version> <pamirs.ui.designer.version>5.3.3</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.1</pamirs.framework.version> <pamirs.boot.version>5.3.2</pamirs.boot.version> <pamirs.distribution.version>5.3.0</pamirs.distribution.version> <!– 平台功能 –> <pamirs.metadata.manager>5.3.1</pamirs.metadata.manager> <pamirs.designer.metadata.version>5.3.1</pamirs.designer.metadata.version> <pamirs.core.version>5.3.5</pamirs.core.version> <pamirs.workflow.version>5.3.5</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.4</pamirs.flow.designer.base.version> 前端版本包信息 { "@kunlun/vue-dependencies": "5.3.6", "@kunlun/vue-ui-antd": "5.3.6", "@kunlun/vue-ui-el": "5.3.6", "@kunlun/vue-mobile-dependencies": "5.3.3", "@kunlun/vue-ui-mobile-vant": "5.3.3", "@kunlun/mobile-workbench": "5.3.3", "@kunlun/data-designer-open-pc": "5.3.0", "@kunlun/data-designer-open-mobile": "5.3.0" } 前端详细版本信息 可通过node_modules/@kunlun查看 { "@kunlun/cache": "5.3.2", "@kunlun/dsl": "5.3.2", "@kunlun/environment": "5.3.2", "@kunlun/event": "5.3.2", "@kunlun/expression": "5.3.2", "@kunlun/meta": "5.3.2", "@kunlun/request": "5.3.2", "@kunlun/router": "5.3.2", "@kunlun/service": "5.3.2", "@kunlun/shared": "5.3.2", "@kunlun/spi": "5.3.2", "@kunlun/state": "5.3.2", "@kunlun/theme": "5.3.2", "@kunlun/engine": "5.3.2", "@kunlun/vue-admin-base": "5.3.6", "@kunlun/vue-admin-layout": "5.3.6", "@kunlun/vue-dependencies": "5.3.6", "@kunlun/vue-router": "5.3.6", "@kunlun/vue-ui": "5.3.6", "@kunlun/vue-ui-antd": "5.3.6", "@kunlun/vue-ui-common": "5.3.6", "@kunlun/vue-ui-el": "5.3.6", "@kunlun/vue-widget": "5.3.6", "@kunlun/vue-expression": "5.3.1", "@kunlun/vue-mobile-base": "5.3.3", "@kunlun/vue-mobile-dependencies": "5.3.3", "@kunlun/vue-ui-mobile-vant": "5.3.3", "@kunlun/mobile-workbench": "5.3.1", "@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.4.2-amd64 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.3:5.3.4.2-arm64 镜像拉取 镜像或JAR版本：5.3.4.2 体验镜像：（所有中间件及前后端服务，包含全部设计器）…

    张博昊的头像 张博昊
    2024年12月25日
    1.1K00
  • 界面设计器创建批量更新的动作 无代码讲解

    界面设计器创建批量更新的动作

    界面设计器如果创建批量更新的动作 一、拖拽批量动作到表格区域 拖拽批量动作至表格区域，创建批量更新动作设置动作信息，设置完成之后点击保存 二、设置批量动作弹窗视图 点击设计弹窗，出现弹窗设计器界面将需要批量更新的字段拖入表单区，将待提交的数据需要展示字段拖入表格区域，比如更新名称，展示待提交数据的ID、名称、创建时间（注意：创建时间需要在表格中也展示）拖拽客户端动作进入动作区域，并设置动作信息，客户端行为选择批量更新动作设置成功，点击保存 三、发布设计好的批量动作，在运行页面看看效果 选择批量更新的数据之后点击批量更新将名称修改为‘批量修改名称’查看最后实现效果

    oinone的头像 oinone
    2024年4月22日
    2.5K00
  • 3.5.7.2 自定义母版 Oinone 7天入门到精通

    3.5.7.2 自定义母版

    母版是什么 在业务系统中，母版是一种全局通用的组件，用于包裹每个页面的元素。这个概念类似于 PPT 中的母版，它定义了页面的整体结构、样式和布局，使得系统具有一致的外观和风格。 特点： 全局通用：母版是全局性的，适用于系统中的每个页面，确保一致性的用户体验。 包裹元素：母版包裹每个页面的元素，定义了整体的结构和布局。 外观一致性：通过统一的母版设计，系统达到外观和风格的一致性。 与 PPT 母版的类比： 在母版的概念上，与 PPT 中的母版类似，都是用于定义整体结构和样式，确保每个页面都具有一致的外观。 默认母版范围: 图3-5-7-20 默认母版范围 作用场景 在系统中，我们提供了多个纬度的母版，包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度，以满足不同层次的定制需求。 母版纬度： 全局母版： 覆盖系统中所有页面，确保全局的一致性和统一的用户体验。 定义全局性的结构、样式和布局。 应用母版： 适用于特定应用或模块，定制化程度介于全局和页面之间。 允许在不同应用间实现一定的差异化。 页面母版： 面向具体页面，提供最大的定制化空间。 允许在不同页面中定义不同的结构和样式。 选择纬度： 业务场景决定：根据具体的业务场景和需求选择合适的母版纬度。 定制化需求：如果需要全局一致性，选择全局母版；如果在应用层面有特定需求，选择应用母版；如果需要最大的灵活性和定制化，选择页面母版。 参数说明： 在系统中，使用 registerMask 注册母版时，需要提供两个参数。第一个参数是母版的 XML，第二个参数用于控制母版的注册行为，包括 module、moduleName、model 和 actionName。 母版 XML（第一个参数）： 提供母版的 XML 描述，定义了母版的结构和样式。 控制参数（第二个参数）： module：指定模块的名称。 moduleName：指定模块的显示名称。 model：指定母版所属的模型。 actionName：指定母版的操作名称，可以是字符串或字符串数组。 全局母版 可以使用 registerMask 注册母版。当第二个参数为 {} 时，即代表注册全局母版。 示例工程目录 以下是需关注的工程目录示例，并确保导入导出依赖正确： 图3-5-7-21 全局纬度注册母版工程目录示例 示例代码 以下是一个示例代码： import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时，我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件，公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例 复制这段代码执行下registerGlobalMask()试试看吧 效果 右上角消息、语言切换、用户被移除。 图3-5-7-23 全局纬度注册母版效果示例 应用母版 在系统中，可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时，即注册了 resource（资源）应用的母版。 示例工程目录 以下是需关注的工程目录示例，更新导出./moduleMask： 图3-5-7-24 应用纬度注册母版工程目录示例 示例代码 以下是一个示例代码： /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.3K00
  • 提交数据动作如何把弹窗内的数据完全返回 低无一体

    提交数据动作如何把弹窗内的数据完全返回

    场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单，表单内有一个o2m字段，展示了除关联关系字段(大部分场景为id)外的其他字段 弹窗底部动作区域有一个提交数据的客户端动作，该动作会将弹窗内表单的数据回写到表格行的数据上 场景截图 问题现象 点击提交数据的客户端动作，会将数据回写到表格行的数据上，但是表格行拿到的o2m字段的数据只有id字段，o2m字段的编码和名称并不会提交到表格行，o2m字段默认提交规则是只会提交关联关系字段（大部分场景为id）的数据 解决方案 该方案适合5.x版本,4.x版本新建的字段组件无法自动生成属性面板，建议拿下面的组件在SPI加上model和name注册实现 自定义o2m字段所在的组件，m2m字段或者其他类似问题的组件也是如下面组件一样覆写submit方法即可 import { BaseFieldWidget, FormO2MTableFieldWidget, ModelFieldType, SPI, SubmitRelationValue, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'SubmitAllDataO2MTable' }) ) export class MyFormO2MTableFieldWidget extends FormO2MTableFieldWidget { public async submit(submitValue: SubmitValue): Promise<Record<string, unknown> | SubmitRelationValue | undefined> { return { [this.itemName]: this.value }; } } 在界面设计器的组件功能内新增对应业务类型的自定义组件，组件内的元件api名称填写上面组件的名称SubmitAllDataO2MTable 在界面设计器的设计页面切换o2m字段组件为SubmitAllDataO2MTable 参考文档 自定义组件文档

    nation的头像 nation
    2024年6月28日
    1.5K00

Leave a Reply

登录后才能评论