因为浏览器需构建并渲染全部DOM节点，即使CSS隐藏后续行，仍触发全量布局重绘；真正有效的是仅插入当前页tr，其余数据保留在JS数组中。
为什么直接用 table + 前端分页会卡顿？
因为浏览器渲染整张大表（比如上万行）时，DOM 节点数暴增，哪怕只显示前 20 行，table 元素内部仍包含全部 tr，CSS 计算、布局、重绘全量触发。这不是“显示逻辑”问题，是 DOM 构建本身过载。
局部渲染的核心不是“隐藏后面行”，而是“不创建后面行”。常见错误是用 display: none 或 visibility: hidden 控制行显隐——这毫无性能改善。
- 真正有效的做法：只把当前页的
tr插入 DOM，其余数据保留在 JS 数组里 - 滚动到底部或点击页码时，清空 tbody，再 append 新一批
tr - 避免用
innerHTML += ...拼接，每次替换整个tbody.innerHTML更可控
slice() + map() 生成当前页 DOM 片段
假设你有 data 是一个数组，每项是对象：{ id: 1, name: 'Alice', score: 95 }，当前页码为 currentPage，每页条数为 pageSize：
const start = (currentPage - 1) * pageSize;
const end = start + pageSize;
const pageData = data.slice(start, end);
const trList = pageData.map(item =>
`<tr><td>${item.id}</td><td>${item.name}</td><td>${item.score}</td></tr>`
).join('');
tbody.innerHTML = trList;注意：如果 data 本身是响应式数据（如 Vue/React），不要直接操作 innerHTML；应走框架的列表渲染机制，但底层逻辑仍是“只渲染当前页片段”。
立即学习“前端免费学习笔记（深入）”；
-
slice()不修改原数组，安全；end可超出长度，JS 自动截断，无需额外判断 - 若需保留
tr的事件绑定（如点击编辑），建议用事件委托绑定到tbody，监听tr或td的 click - 避免在
map中做复杂计算或格式化，提前处理好字段值（如日期转字符串）
如何让分页控件知道“总页数”和“当前范围”？
前端分页必须依赖两个基础变量：totalItems（原始数据总条数）和 pageSize（每页几条）。这两者决定 totalPages = Math.ceil(totalItems / pageSize)。
关键点在于：不要等用户点下一页才去算总页数——它应该在数据加载完成时就确定。否则会出现“最后一页点不了”或“页码显示错乱”。
- 如果后端返回了
total字段（如分页接口返回{ data: [...], total: 1234 }），直接用它 - 如果只有数据数组，用
data.length即可；但注意：这个 length 必须是完整数据集长度，不是当前页的 - 页码跳转输入框要校验：输入非数字、超范围（
< 1或> totalPages）时，自动 fallback 到合法值
预览功能怎么加？别用新弹窗，用 inline tooltip 或悬浮面板
所谓“预览”，本质是查看某行完整字段（比如表格只显示 name 和 score，但预览要看到 email、phone、address 等 8 个字段）。弹窗或新页面破坏上下文，且移动端体验差。
推荐方案：鼠标 hover 某行时，在该行右侧或下方浮出一个 div，内容由该行数据动态生成。关键是控制渲染时机和销毁时机：
- 监听
tbody的mouseenter，取e.target.closest('tr')找到对应行，再通过rowIndex或data-id属性查原始数据 - 预览面板内容用
textContent或简单模板拼接，避免又搞一套 React/Vue 渲染 - 必须监听
mouseleave并清除预览面板，否则滚动后悬停残留、内存泄漏 - 移动端慎用 hover；可用点击触发，加个“?️”图标，点击展开收起
局部渲染的复杂点不在分页逻辑本身，而在状态同步：当前页数据、滚动位置、hover 预览、排序筛选这些操作都可能改变可视数据源。任何一项没和真实数据数组对齐，就会出现“点开预览却是上一页的数据”这类问题。
