JQ Grid内部分页机制原理及大数据量渲染性能咨询

内部分页机制原理 #

• 内部分页（客户端分页）模式下，JQ Grid会把所有记录先加载到JavaScript对象中存储，不会一次性在DOM里创建所有行元素。
• 当触发分页事件（比如点击页码、切换每页显示条数）时，Grid会从内存的数据集里筛选出当前页需要的记录（比如你配置的50条），然后仅渲染这部分对应的DOM节点，之前页的DOM会被销毁或隐藏，核心逻辑就是只渲染当前页的内容。

10000条记录下渲染缓慢的优化方案 #

• 优先改用服务器端分页：这是最有效的方案，每次只请求当前页的50条数据，前端不需要处理10000条数据的内存存储和筛选，直接渲染返回的小数据集，从根源解决性能问题。
• 客户端分页的优化调整：如果必须用客户端分页：
  • 预处理数据：提前过滤掉不需要的字段，减少每条数据的体积，降低内存占用和筛选计算量。
  • 启用虚拟滚动：设置scroll: 1开启虚拟滚动模式，Grid只会渲染可视区域内的行，滚动时动态加载销毁DOM，避免一次性渲染大量节点。
  • 关闭不必要的功能：比如shrinkToFit: false（列宽固定时）、viewrecords、动画效果等，减少DOM重排重绘和额外计算。
  • 初始化时限定渲染范围：确保初始化时page: 1、rowNum: 50，只渲染第一页内容，不要提前处理全量数据的DOM渲染。
• 优化自定义逻辑：如果有自定义列格式化或事件绑定，确保只在初始化时绑定一次，避免分页切换时重复执行冗余逻辑。

内容的提问来源于stack exchange，提问作者kumaresh