1. Oinone社区Home

深度分页问题优化方案

• • Uncategorized • 1891 views

问题原因

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
0 0
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • OioProvider详解 前端

    OioProvider详解

    OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务，并使用GraphQL协议作为前后端协议。 参考文档： apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置（优先于拦截器） */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors：前置拦截器 networkError：网络错误 actionRedirect：重定向 requestSuccess 请求成功 loginRedirect：登录重定向 requestError：请求错误 messageHub：MessageHub afterInterceptors：后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时，将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…

    汤乾华's avatar 汤乾华
    2023年11月6日
    2.2K00
  • 5.2.0版本feature：新增搜索字段组件支持隐藏等配置，请升级对应版本 5.x

    5.2.0版本feature：新增搜索字段组件支持隐藏等配置，请升级对应版本

    版本号： 5.2.15 版本发布日期：2024.12.10更新要点：新增搜索字段组件支持隐藏等配置 5.2.0 版本 升级说明及步骤（已升级为5.0.0版本忽略） 此版本与4.7.8版本的兼容方案如下，请严格参照升级说明及步骤进行1、【重要】升级前备份base库和用户权限模块所在的库 2、【重要】升级过程执行SQL严格按照升级文档中的步骤执行。特别注意：部分SQL是要求【发布前执行】，部分SQL是要求【发布后执行】 5.0.0升级详细说明及步骤 升级内容（5.2.0） 新增搜索字段组件支持隐藏等配置 工作流抄送的待办增加已读操作 工作流审批同意或者拒绝时抄送 修复导入时Excel中使用千分位出现异常的问题 修复模型设计器创建字段时multi标记错误的问题 修复树组件分页计算错误的问题 修复树组件加载更多按钮出现重复渲染的问题 修复工作台站内信查询结果和首页不一致的问题 修复新数据库无法配置菜单权限的问题 修复菜单预置过滤条件无法删除问题 修复移动端枚举取值错误的问题 修复PC端菜单折叠时，不需要展开的SubMenu，否则会导致切换多tab的会导致打开SubMenu气泡区域 请尽可能保证业务工程前后端服务以及设计器同步升级前端服务仅需重新执行npm install即可自动升级到最新版本 后端版本包信息 Oinone平台部署及依赖说明（v5.0） 未使用到的版本号请忽略，按项目中使用到的进行替换。 <!– 平台基础 –> <oinone.version>5.2.15.2</oinone.version> <!– 设计器 –> <pamirs.workflow.designer.version>5.2.0</pamirs.workflow.designer.version> <pamirs.model.designer.version>5.2.8</pamirs.model.designer.version> <pamirs.ui.designer.version>5.2.12</pamirs.ui.designer.version> <pamirs.data.designer.version>5.2.5</pamirs.data.designer.version> <pamirs.dataflow.designer.version>5.2.0</pamirs.dataflow.designer.version> <pamirs.eip.designer.version>5.2.6</pamirs.eip.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.2.11</pamirs.k2.version> <pamirs.framework.version>5.2.15</pamirs.framework.version> <pamirs.boot.version>5.2.15</pamirs.boot.version> <pamirs.distribution.version>5.2.7</pamirs.distribution.version> <!– 平台功能 –> <pamirs.metadata.manager>5.2.1</pamirs.metadata.manager> <pamirs.designer.metadata.version>5.2.2</pamirs.designer.metadata.version> <pamirs.core.version>5.2.20</pamirs.core.version> <pamirs.workflow.version>5.2.7</pamirs.workflow.version> <pamirs.workbench.version>5.2.0</pamirs.workbench.version> <pamirs.data.visualization.version>5.2.7</pamirs.data.visualization.version> <!– 设计器 –> <pamirs.designer.common.version>5.2.3</pamirs.designer.common.version> <pamirs.flow.designer.base.version>5.2.4</pamirs.flow.designer.base.version> 前端版本包信息 { "@kunlun/vue-dependencies": "5.2.28", "@kunlun/vue-ui-antd": "5.2.28", "@kunlun/vue-ui-el": "5.2.28", "@kunlun/vue-mobile-dependencies": "5.2.12", "@kunlun/vue-ui-mobile-vant": "5.2.12", "@kunlun/mobile-workbench": "5.2.5", "@kunlun/data-designer-open-pc": "5.2.1", "@kunlun/data-designer-open-mobile": "5.2.1" } 前端详细版本信息 可通过node_modules/@kunlun查看 { "@kunlun/cache": "5.2.8", "@kunlun/dsl": "5.2.8", "@kunlun/event": "5.2.8", "@kunlun/expression": "5.2.8", "@kunlun/meta": "5.2.8", "@kunlun/request": "5.2.8", "@kunlun/router": "5.2.8", "@kunlun/service": "5.2.8", "@kunlun/shared": "5.2.8", "@kunlun/spi": "5.2.8", "@kunlun/state": "5.2.8", "@kunlun/theme": "5.2.8", "@kunlun/engine": "5.2.10", "@kunlun/vue-admin-base": "5.2.28", "@kunlun/vue-admin-layout": "5.2.28", "@kunlun/vue-dependencies": "5.2.28", "@kunlun/vue-router": "5.2.28", "@kunlun/vue-ui": "5.2.28", "@kunlun/vue-ui-antd": "5.2.28", "@kunlun/vue-ui-common": "5.2.28", "@kunlun/vue-ui-el": "5.2.28", "@kunlun/vue-widget": "5.2.28", "@kunlun/vue-expression": "5.2.0", "@kunlun/vue-mobile-base": "5.2.12", "@kunlun/vue-mobile-dependencies": "5.2.12", "@kunlun/vue-ui-mobile-vant": "5.2.12", "@kunlun/mobile-workbench": "5.2.5", "@kunlun/data-designer-core": "5.2.1", "@kunlun/data-designer-core-mobile": "5.2.1", "@kunlun/data-designer-core-pc": "5.2.1", "@kunlun/data-designer-open-mobile": "5.2.1", "@kunlun/data-designer-open-pc": "5.2.1" } 镜像说明 所有镜像均使用docker manifest支持amd64和arm64架构。如镜像拉取过慢，可在对应镜像Tag添加-amd64、-arm64后缀获取单一架构镜像。 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.2:5.2.15.2-amd64 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.2:5.2.15.2-arm64 镜像拉取 镜像或JAR版本：5.2.15.2 体验镜像：（所有中间件及前后端服务，包含全部设计器） docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.2:5.2.15.2 部署镜像：（包含前后端服务，包含全部设计器） docker pull harbor.oinone.top/oinone/oinone-designer-mini-v5.2:5.2.15.2…

    张博昊's avatar 张博昊
    2024年12月10日
    1.4K00
  • 查询时自定义排序字段和排序规则 代码实践

    查询时自定义排序字段和排序规则

    指定字段排序 平台默认排序字段，参考IdModel，按创建时间和ID倒序(ordering = "createDate DESC, id DESC") 方法1：模型指定排序 模型定义增加排序字段。@Model.Advanced(ordering = "xxxxx DESC, yyyy DESC") @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"}) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") @Model.Advanced(ordering = "createDate DESC") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; // ………… } 方法2：Page查询中可以自定排序规则 API参考 pro.shushi.pamirs.meta.api.dto.condition.Pagination#orderBy public <G, R> Pagination<T> orderBy(SortDirectionEnum direction, Getter<G, R> getter) { if (null == getSort()) { setSort(new Sort()); } getSort().addOrder(direction, getter); return this; } 具体示例 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetShop> queryPage(Pagination<PetShop> page, IWrapper<PetShop> queryWrapper){ page.orderBy(SortDirectionEnum.DESC, PetShop::getCreateDate); page = new PetShop().queryPage(page, queryWrapper); return page; } 方法3：查询的wapper中指定 API参考：pro.shushi.pamirs.framework.connectors.data.sql.AbstractWrapper#orderBy @Override public Children orderBy(boolean condition, boolean isAsc, R… columns) { if (ArrayUtils.isEmpty(columns)) { return typedThis; } SqlKeyword mode = isAsc ? ASC : DESC; for (R column : columns) { doIt(condition, ORDER_BY, columnToString(column), mode); } return typedThis; } 具体示例 public List<PetShop> queryList(String name) { List<PetShop> petShops = Models.origin().queryListByWrapper( Pops.<PetShop>lambdaQuery().from(PetShop.MODEL_MODEL) .orderBy(true, true, PetShop::getCreateDate) .orderBy(true, true, PetShop::getId) .like(PetShop::getShopName, name)); return petShops; } 设置查询不排序 方法1：关闭平台默认排序字段，设置模型的ordering，改成：ordering = "1=1" 模型定义增加排序字段。@Model.Advanced(ordering = "1=1") @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"}) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") @Model.Advanced(ordering =…

    望闲's avatar 望闲
    2024年5月25日
    2.8K00
  • TS 结合 Vue 实现动态注册和响应式管理 前端

    TS 结合 Vue 实现动态注册和响应式管理

    基础知识 1: 面向对象 面向对象编程是 JavaScript 中一种重要的编程范式，它帮助开发者通过类和对象组织代码，提高代码的复用性。 2: 装饰器 装饰器在 JavaScript 中是用于包装 class 或方法的高阶函数 为了统一术语，下面的内容会把装饰器讲成注解 在 oinone 平台中，无论是字段还是动作，都是通过 ts + vue 来实现的，ts 中是面向对象的写法，所有的属性、方法建议都在对应的 class 中，如果有通用的属性跟方法，可以放在一个公共的 class 中，然后通过继承来实现，这样便于维护。 <!– FormString.vue –> <template> <div> <p>用户名: {{userName}}</p> <button @click="updateUser({name: '王五'})">修改用户名</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: { userName: { type: String, default: '' }, userInfo: { type: Object, default: () => ({}) }, updateUser: { type: Function, default: () => () => ({}) } } }); </script> import FormString from './FormString.vue' @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class FormCustomStringFieldWidget extends FormFieldWidget { public initialize(props) { super.initialize(props); // 调用父类方法，确保继承的属性和方法正常初始化 this.setComponent(FormString); // 注册 Vue 组件，这样该 Widget 就会渲染 FormString 组件 return this; } public otherInfo = { name:'张三' } @Widget.Reactive() public userInfo = { name:'李四' } @Widget.Reactive() public get userName() { return this.userInfo.name } @Widget.Method() public updateUser userName(user) { this.userInfo = user } public updateOtherUser userName(user) { this.otherUser = user } } 这段代码定义了一个 FormCustomStringFieldWidget 类，用于处理表单中 String 类型字段的展示和交互。该类继承自 FormFieldWidget，并使用了多种注解和特性来实现不同功能。下面是对代码的详细讲解。 SPI 讲解 @SPI.ClassFactory() 无论是自定义字段还是动作，或者是自定义 mask、layout，都会用到@SPI.ClassFactory来注册，@SPI.ClassFactory 是一个注解，它标记了该类是通过工厂模式注册的。 在前端中，所有的注解（装饰器）本质上还是高阶函数，下面是一段伪代码。 const SPI = { ClassFactory(token) { return (targetClass) => {…

    汤乾华's avatar 汤乾华
    2024年9月21日
    2.2K00
  • 自定义视图内部渲染动态视图 API&SDK 文档

    自定义视图内部渲染动态视图

    效果图 当前图片中，上方是自定义的视图，下方是动态的表单视图 代码 步骤拆分：1: 通过注册 layout 的方式先自定义视图，把自己的业务逻辑写完2: 在对应的 vue 文件里面定义一个插槽，用来放置动态的表单视图3: 在组件挂在的时候，创建动态视图 1: 注册 layout // registry.ts import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="CustomViewWidget"></element> </view>`, { model: '模型编码', actionName: '动作名称', viewType: ViewType.Form } ); 2: vue 里面定义 slot <!–CustomView.vue –> <template> <div> <h1>这是自定义的视图</h1> <img src="https://pamirs.oss-cn-hangzhou.aliyuncs.com/oinone/static/images/login_bg_left.jpg" height="400" width="2600" alt="" /> <h1>下面设计器配置的动态视图</h1> <slot name="dynamicView"></slot> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ }); </script> 3: 组件挂载的时候，创建动态视图 // CustomViewWidget.ts import { SPI, BaseElementWidget, ViewType, ViewCache, Widget, MetadataViewWidget, BaseView, TableView, FormView, FormWidget, registerLayout, DetailView, DetailWidget, isRelation2MField, customQuery, FormFieldWidget } from '@kunlun/dependencies'; import CustomView from './CustomView.vue'; import { delay } from 'lodash-es'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomViewWidget' }) ) export class CustomViewWidgetWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomView); return this; } /** * 定义一个属性，用来存储动态视图 */ private metadataViewWidget: MetadataViewWidget | undefined; /** * 获取动态视图的数据 */ @Widget.Method() private getWidgetData() { const children = this.metadataViewWidget?.getChildrenInstance() as BaseView[]; const child = children[0]; if (child) { return child instanceof TableView ? child.getCurrentDataSource() : child.getCurrentActiveRecords(); } return null; } /**…

    汤乾华's avatar 汤乾华
    2025年3月24日
    1.2K00

Leave a Reply

Please Login to Comment