前端分页适用于中等数据量，后端分页推荐用于≥1000条数据；虚拟滚动应对上万行列表；配合防抖、节流、懒加载及骨架屏提升体验。
JavaScript 实现分页功能，核心在于“按需加载”和“控制渲染范围”，而不是一次性把所有数据塞进 DOM。面对大量数据（比如上万条），直接渲染会导致页面卡顿、内存占用高、用户体验差。关键不是“能不能分页”，而是“怎么分得轻量、流畅、可维护”。
前端分页：适合数据量中等（
适用于数据已全部获取（如从 API 一次性返回），只需在前端切片展示：
- 用 Array.slice(start, end) 提取当前页数据，避免修改原数组
- 配合状态管理（如 React 的 useState 或 Vue 的 ref）更新 current page 和 page size
- 生成页码按钮时，建议限制显示范围（如只显示前后 2 个页码 + 当前页），避免页码栏过长
- 注意：跳页时要校验页码合法性（ totalPage 应忽略或重置）
后端分页：推荐用于大量数据（≥ 1000 条）
真正解决性能问题的方式——让服务端只返回当前页所需数据：
- 请求时传参：page=2&pageSize=20（或 offset=20&limit=20）
- 前端只负责发请求、渲染结果、更新分页器状态，不持有全量数据
- 配合 loading 状态与骨架屏，提升感知流畅度
- 禁用“跳转到最后一页”这类操作（除非后端支持 count 快速估算）
虚拟滚动（Virtualized List）：应对超长列表（上万行）
当必须渲染大量行（如表格、聊天记录、日志流），但又不能分页时，用虚拟滚动只渲染可视区域内的元素：
立即学习“Java免费学习笔记（深入）”；
- 监听容器 scroll 事件，计算当前可见索引范围（如 scrollTop / itemHeight）
- 用 transform: translateY() 定位整个列表位置，保持滚动惯性
- DOM 节点复用（类似 React 的 key 机制），避免频繁创建/销毁
- 推荐直接使用成熟方案：react-window（React）、vue-virtual-scroller（Vue）、或原生封装 IntersectionObserver + requestIdleCallback
防抖 + 节流 + 懒加载：辅助优化体验
分页交互本身也要防误操作和资源浪费：
- 点击“下一页”按钮时加 loading 禁用，防止重复提交
- 搜索/筛选后重置 page=1，避免跨页逻辑错乱
- 滚动到底部自动加载下一页？用 IntersectionObserver 替代 scroll 事件监听，更性能友好
- 网络请求失败时，提供重试按钮，而非静默失败
