JavaScript分页核心在于数据位置、页码计算和DOM高效更新：前端用slice()适合小数据，需校验页码；后端分页需同步请求参数与loading状态；大数据量应采用虚拟滚动；URL须同步页码以防刷新丢失。
JavaScript 实现分页功能，核心不在于“怎么写循环”，而在于「数据在哪」「谁来算页码」「DOM 怎么更新才不卡」。直接操作 Array.slice() 是最轻量的起点，但真实场景里，它往往只是冰山一角。
纯前端静态数据分页：用 slice() + 状态管理
适合数据量小（slice(start, end)，而是控制好当前页码 currentPage 和每页条数 pageSize 的联动逻辑。
- 起始索引永远是
(currentPage - 1) * pageSize，别手抖写成currentPage * pageSize - 翻页按钮要禁用边界状态：当
currentPage === 1时禁用“上一页”，currentPage >= Math.ceil(data.length / pageSize)时禁用“下一页” - 用户手动输入页码时，必须校验并强制约束在合法范围内，否则
slice()返回空数组却不报错，界面直接“消失”
const data = Array.from({ length: 123 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }));
let currentPage = 1;
const pageSize = 10;
<p>function getPageData() {
const start = (currentPage - 1) * pageSize;
return data.slice(start, start + pageSize);
}</p><p>function renderList() {
const listEl = document.getElementById('list');
listEl.innerHTML = getPageData().map(item => <code><div>${item.name}</div></code>).join('');
}后端分页对接：关键在请求参数和 loading 状态同步
前端只负责传对 page 和 limit（或 offset/size），但容易忽略响应体结构差异和错误兜底。
- 确认后端用的是页码制（
page=2&limit=20）还是偏移制（offset=20&limit=20），别混用 - 响应里必须有总条数字段（如
total或pagination.total），否则无法算总页数；没有就只能禁用页码跳转，只留“下一页”按钮 - 每次请求前设
loading = true，清空旧列表；失败时保留当前页数据，只提示错误，避免白屏+丢失用户位置
虚拟滚动替代分页：大数据量下的更优解
当列表项 DOM 节点多（比如每页 50 条，但总数据 10 万）、滚动卡顿明显时，分页本身已不是瓶颈，render 100 个 div 才是。此时应放弃传统分页，改用虚拟滚动。
立即学习“Java免费学习笔记（深入）”；
- 核心思路：只渲染视口内 + 缓冲区的 DOM，滚动时动态替换
innerHTML或重置transform: translateY() - 不用自己造轮子：
react-window（React）、vue-virtual-scroller（Vue）、原生可用IntersectionObserver+requestIdleCallback做懒加载 - 注意：虚拟滚动需预知每项高度（固定高最佳），否则无法准确计算可显示区域
URL 同步与浏览器历史：别让用户刷新丢页码
点击页码后不更新 URL，用户刷新就回到第 1 页——这是最常被忽略的体验断点。
- 用
history.replaceState()更新 URL 参数（如?page=3），避免新增历史记录 - 监听
popstate事件，在前进/后退时读取 URL 中的page并触发重新渲染 - 服务端渲染（SSR）场景下，首次加载必须从 URL 解析页码，而不是默认
currentPage = 1
分页看似简单，但真实项目里，90% 的问题出在边界没控住：页码输入非法、后端 total 字段缺失、滚动锚点丢失、URL 不同步。先跑通数据流和状态流转，再优化交互细节，比一上来堆 fancy 组件更稳。
