数组按需切片加载的核心是“不一次性读完，而是用到哪段取哪段”，适用于大数据量渲染、分页展示、无限滚动等场景；关键在于控制访问范围与触发时机，明确切片边界（pageSize、startIndex）和加载时机（滚动到底部、点击分页、Intersection Observer），配合状态管理缓存已加载区间、懒更新渲染、边界安全截断及异常降级处理。
数组按需切片加载，核心是“不一次性读完，而是用到哪段取哪段”，适用于大数据量渲染、分页展示、无限滚动等场景。关键不在数组本身，而在控制访问范围与触发时机。
明确切片边界与加载时机
先定义每次加载多少项（pageSize），当前从第几项开始（startIndex），再通过 slice(startIndex, startIndex + pageSize) 获取当前片段。加载时机通常由用户行为触发，比如滚动到底部、点击“下一页”、或监听 Intersection Observer 元素进入视口。
- 滚动加载：监听容器滚动，当滚动位置接近底部时，计算并请求下一片段
- 分页按钮：点击“第3页” →
startIndex = (3 - 1) * pageSize - 虚拟列表：只渲染可视区域±1~2屏内的数据，随滚动实时更新 startIndex
用状态管理切片索引与缓存
避免重复请求相同片段，建议维护一个已加载的范围（如 loadedRange = { start: 0, end: 99 }），每次请求前检查是否已覆盖目标区间。若未命中，再发起新切片获取——可以是本地数组 slice，也可以是 API 分页拉取（如 /api/items?offset=200&limit=50）。
- 本地大数组：直接
bigArray.slice(start, end)，快但内存占用高 - 远程分页：把 startIndex 和 pageSize 映射为接口参数，后端返回对应记录
- 混合策略：前端缓存已加载的若干片段，超出缓存再请求，减少重复 IO
配合渲染层做懒更新
切片拿到后不要直接全量重绘列表，而是仅更新 DOM 中实际变化的部分。例如使用 React 的 key 精准控制项更新，或 Vue 的 v-for 配合 computed 切片数据；原生 JS 可用 DocumentFragment 批量插入，避免频繁 reflow。
- 给每项加唯一 key（如
item.id或${startIndex}-${index}），防止错位复用 - 切换切片时，优先复用已有 DOM 节点，仅替换文本/属性，不重建结构
- 可视区外的节点可设为
display: none或用visibility: hidden保留布局
处理边界与异常情况
起始索引可能越界（如用户跳转到最后一页但总条数不是 pageSize 整数倍），需做安全截断：Math.min(startIndex, array.length)；加载失败时要有降级提示，比如显示“加载失败，点击重试”，并保留上次成功切片。
- 空数据：
if (array.length === 0) return [] - 超尾部：
const end = Math.min(startIndex + pageSize, array.length) - 加载中状态：显示骨架屏或 loading 指示器，禁用重复触发操作
