BetterScroll Infinity 插件指南面向海量列表的无限滚动与虚拟化渲染方案【免费下载链接】better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址: https://gitcode.com/gh_mirrors/be/better-scroll导读better-scroll/infinity是 BetterScroll 生态中面向海量列表数据的无限滚动插件。当页面需要渲染成千上万条列表项时若把所有 DOM 一次性挂载必然导致滚动卡顿与内存飙升infinity 插件的做法是只渲染视口附近的少量 DOM并在滚动过程中动态回收与复用配合墓碑tombstone占位机制实现数据未就绪时的流畅滚动。读完本文你将掌握该插件的安装方式、三个核心配置函数fetch/render/createTombstone的契约与实现细节、底层数据管理—索引计算—DOM 管理的运行原理以及如何在真实项目中落地一个高性能聊天列表或长列表页面。该插件基于 better-scroll/core 实现除非你有大量数据渲染需求否则使用 core 即可插件官方说明。一、安装与注册1. 安装依赖当前仓库中该插件版本为 2.5.1见 packages/infinity/package.json与better-scroll/core同版本配套使用npm install better-scroll/infinity --save # or yarn add better-scroll/infinity2. 通过静态方法注册插件infinity 遵循 BetterScroll 插件体系需要先引入并通过BScroll.use()注册import BScroll from better-scroll/core import InfinityScroll from better-scroll/infinity BScroll.use(InfinityScroll)注册后BScroll构造函数即支持infinity配置项。在源码层面插件通过模块声明扩展了 core 的CustomOptions接口packages/infinity/src/index.ts并将pluginName固定为infinitypackages/infinity/src/index.ts。二、核心配置项三个必须实现的函数实例化 BetterScroll 时传入infinity配置对象它包含三个全部必填的函数。以下代码完整来自官方文档packages/infinity/README.mdconst bs new BScroll(.wrapper, { infinity: { fetch(count) { // 获取大于 count 数量的数据该函数是异步的它需要返回一个 Promise。 // 成功获取数据后你需要 resolve 数据数组也可以 resolve 一个 Promise。 // 数组的每一个元素是列表数据在 render 方法执行的时候会传递这个数据渲染。 // 如果没有数据的时候你可以 resolve(false)来告诉无限滚动列表已经没有更多数据了。 }, render(item, div) { // 渲染每一个元素节点item 是数据div 是包裹元素节点的容器。 // 该函数需要返回渲染后的 DOM 节点。 }, createTombstone() { // 返回一个墓碑 DOM 节点。 } } })1.fetch(count)职责异步拉取数据。count表示当前视口需要的最小新增条数实际应获取大于等于count的数量。返回值契约类型定义见 packages/infinity/src/index.tsresolve(Arraydata)返回数据数组数组每个元素将作为render的第一个参数item渲染resolve(Promise)允许 resolve 一个 Promise例如多个异步请求Promise.all的结果resolve(false)告诉插件没有更多数据停止无限滚动。2.render(item, div?)职责渲染单个列表项。参数说明item是fetch提供的数据项div是插件回收复用的旧 DOM 节点可能为 undefined——此时必须创建一个新的HTMLElement并返回。返回值契约必须返回一个HTMLElement插件会把它挂载到滚动容器并绝对定位。3.createTombstone()职责返回一个墓碑tombstoneDOM 节点即数据尚未加载完成时用于占位的骨架屏节点。滚动越界时插件用它撑起列表高度并呈现加载中的视觉效果。::: danger 危险fetch、render、createTombstone必须严格按上述注释实现否则插件内部会报错插件内部依赖 Promise若运行环境不支持 Promise需要自行引入 Polyfill插件文档说明。 :::插件初始化时会对这三个函数做类型校验fetch或render不是函数时会发出warn警告packages/infinity/src/index.ts。三、运行机制数据 / 索引 / DOM 三层协作infinity 的高性能来源于其内部四个模块的精细分工初始化调用链见 packages/infinity/src/index.ts1. DataManager数据占位与增量拉取数据层packages/infinity/src/DataManager.ts维护list、loadedNum、hasMore、fetching四个核心状态空数据占位当视口索引end超出已加载条数时先向list填充空占位ListItem保证列表整体高度可计算DataManager.ts增量拉取checkToFetch只在end loadedNum时才调用fetch并利用fetching标志避免并发重复请求DataManager.ts终止条件fetchresolvefalse时置hasMore false并清空多余的占位项随后通知上层移除墓碑、停止动画并复位滚动位置packages/infinity/src/index.ts。单测覆盖了新增数据后onFetchFinish收到hasMoretrue与resolve(false) 后收到hasMorefalse两条关键路径packages/infinity/src/tests/DataManager.spec.ts。2. IndexCalculator视口索引计算与方向感知缓冲索引层packages/infinity/src/IndexCalculator.ts根据当前滚动位置计算需要渲染的[start, end)区间以墓碑高度为最小度量单位推算偏移量依据滚动方向在视口之外追加预渲染缓冲区向下滚动时向前多渲染PRE_NUM10条、向后多渲染POST_NUM30条向上滚动时对称反转IndexCalculator.ts从而保证快速滚动时页面不露白。单测验证了首屏索引、start越界钳制以及上/下滚动时缓冲区方向切换等行为packages/infinity/src/tests/IndexCalculator.spec.ts。3. DomManagerDOM 回收复用与墓碑动画DOM 层packages/infinity/src/DomManager.ts是性能的关键只渲染区间内元素对离开区间的 DOM 放入unusedDom池等待复用不复用则直接移除节点复用render时优先从unusedDom.pop()取旧节点避免频繁创建销毁墓碑过渡动画数据到达时旧墓碑通过 200ms 的transform opacity过渡淡出并回收DomManager.ts绝对定位 高度缓存所有列表项position: absolute并按累计高度translateY定位已渲染项的高度会被缓存未加载项用墓碑高度估算。4. Tombstone墓碑节点池墓碑管理packages/infinity/src/Tombstone.ts在初始化时调用一次createTombstone()测量其尺寸offsetHeight/offsetWidth此后所有占位都复用同一尺寸的节点池并通过getOne()/recycle()循环取放。5. 滚动联动与边界修正插件通过监听 core 的scroll、destroy、contentChanged事件驱动更新内容变化时重建四个模块的内部状态packages/infinity/src/index.ts。同时它会强制probeType Probe.Realtimeindex.ts并把computeBoundary钩子中的maxScrollPos设为EXTRA_SCROLL_Y -2000人为扩大可滚动区域以容纳尚未加载的数据index.ts 与 index.ts。6. 效果验证E2E 测试e2e 测试验证了两个核心承诺快速滚动后真实渲染的列表项数量始终小于 60大量数据下 DOM 数量被严格限制数据未加载时页面中出现超过 30 个墓碑节点占位机制生效。四、实战示例聊天时间线列表仓库中的 Vue 示例对应 React 示例演示了完整用法。其要点如下1. 模板中准备两个隐藏模板节点一个真实列表项模板message和一个墓碑模板tombstone带tombstoneclass分别供render与createTombstone克隆使用render: (item, div) { div div || this.$refs.message.cloneNode(true) // div 不存在时克隆模板 div.dataset.id item.id div.querySelector(.infinity-avatar).src ./image/avatar${item.avatar}.jpg div.querySelector(.infinity-bubble p).textContent item.id item.message // ... 填充图片、时间等字段 return div }, createTombstone: () { return this.$refs.tombstone.cloneNode(true) }2. fetch 实现拉取至少 30 条 模拟异步并在拉取 20 页后resolve(false)结束加载fetch: (count) { count Math.max(30, count) // 保证每次至少获取 30 条 return new Promise((resolve) { setTimeout(() { if (this.pageNum 20) { resolve(false) // 没有更多数据结束无限滚动 } else { const items [] for (let i 0; i Math.abs(count); i) { items[i] getItem(this.nextItem) // 每项为一个 Promise } resolve(Promise.all(items)) } }, 500) }) }3. 样式要点容器与列表项声明will-change: transform、contain: layout以启用合成层优化模板节点通过display: none隐藏但不移出文档确保克隆可用示例样式。4. 更多配套配置示例中还同时开启了scrollY: true并在实例上监听scroll/scrollEnd事件。文档给出的完整初始化写法为插件文档new BScroll(.bs-wrapper, { scrollY: true, infinity: { /* fetch / render / createTombstone */ } })五、适用场景与使用建议适用场景聊天记录、信息流、大表格等单条渲染成本高、总量可达数万级的纵向列表此时 DOM 数量被恒定控制在视口与缓冲区间内E2E 测试中实测低于 60 个滚动帧率稳定。不适用场景普通百条以内列表直接使用 core 即可引入 infinity 反而增加复杂度。渲染性能提示render内部避免同步做高开销操作对于含图片的列表项建议像示例那样在图片加载完成后再 resolve 数据避免布局抖动。结束加载提示resolve(false)后插件会自动停止动画并复位滚动位置可作为加载完毕的信号可在scrollEnd事件中追加 UI 提示。destroy 清理插件在destroy事件中会清空滚动内容并移除墓碑节点packages/infinity/src/index.ts因此 SPA 页面切换时无需手动清理。六、参考链接插件英文 READMEpackages/infinity/README.md插件中文 READMEpackages/infinity/README_zh-CN.md官方插件文档packages/vuepress-docs/docs/zh-CN/plugins/infinity.md源码入口与类型定义packages/infinity/src/index.ts数据管理packages/infinity/src/DataManager.ts 索引计算packages/infinity/src/IndexCalculator.ts DOM 管理packages/infinity/src/DomManager.ts 墓碑packages/infinity/src/Tombstone.ts单测DataManager.spec.ts、IndexCalculator.spec.tsE2E 测试tests/e2e/infinity/infinity.e2e.tsVue 示例packages/examples/vue/components/infinity/default.vue【免费下载链接】better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址: https://gitcode.com/gh_mirrors/be/better-scroll创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考