10 万行 Excel 不再卡死浏览器：SheetJS 虚拟滚动实战一次讲透

10 万行 Excel 不再卡死浏览器：SheetJS 虚拟滚动实战一次讲透

【免费下载链接】sheetjs📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs项目地址: https://gitcode.com/gh_mirrors/sh/sheetjs

深夜十一点，前端同事小林收到产品经理丢来的一张 10 万行报表。他用 SheetJS 解析数据后直接灌进页面，浏览器当场白屏。这不是段子，而是无数人在大型电子表格性能优化上的第一课——解药叫虚拟滚动。

虚拟滚动的核心思路只有一句话：页面里永远只渲染你看得见的那部分行，滚动条却假装整张表都在。

下面我们把它一次讲透：从原理到落地，从踩坑到选型。

一、先搞懂"虚拟"到底虚在哪：只点亮看得见的几扇窗

想象你站在一栋 100 层的写字楼前，想欣赏每层窗户的灯光。最笨的办法是把整栋楼几千扇窗全部点亮——电费惊人，还容易跳闸。聪明人只看视线范围内的那几扇窗：往上看，就点亮上面几扇，同时关掉下面的。

浏览器渲染表格也是同一个道理。10 万行就是 10 万组 DOM 节点，每行十几个单元格，动辄上百万个元素，主线程直接被拖垮。虚拟滚动做的其实是三件事：

• 用一个高度等于"总行数 × 行高"的占位容器撑起真实的滚动条
• 监听滚动事件，算出当前视口正好落在哪几行
• 只创建这几行的 DOM，滚出视口的旧行立刻销毁

滚动条是真的，内容却是"按需点亮"的——这就是"虚拟"二字的由来。数据规模再大，页面上的节点数始终恒定。

二、三步落地：手写一个轻量虚拟滚动表格

不依赖框架，原生 JavaScript 也能实现。我们分三步走。

第 1 步：按区间切片，别让 sheet_to_json 一次性吐全量

SheetJS 的sheet_to_json支持range参数，我们可以只取需要的行区间，从源头减小数据量：

// 只读取工作表的某一段行，而不是整张表一次性导出 function readSlice(ws, startRow, chunkSize) { const ref = XLSX.utils.decode_range(ws['!ref']); // 解析表格总范围 ref.s.r = startRow; // 设置起始行 ref.e.r = Math.min(startRow + chunkSize, ref.e.r); // 结束行不超过末尾 return XLSX.utils.sheet_to_json(ws, { header: 1, range: ref, raw: false }); }

第 2 步：把滚动距离换算成"该显示哪几行"

滚动条往下滚了 5000 像素，到底对应哪一行到哪一行？一次除法就能算清楚：

// 根据滚动高度计算当前可见行的起止位置 function getVisibleRange(scrollTop, rowHeight, viewHeight, totalRows) { const start = Math.floor(scrollTop / rowHeight); // 视口顶部落在哪一行 const visible = Math.ceil(viewHeight / rowHeight); // 一屏能容纳几行 return { start, end: Math.min(start + visible, totalRows) }; }

第 3 步：只重建视口内的行，旧行及时清空

每次滚动，我们都"先清空、再重建"可见区，让页面上最多只存在一两百个节点：

// 滚动时只渲染可见行，同时释放上一帧的旧节点 function onScroll() { const { start, end } = getVisibleRange( wrapper.scrollTop, ROW_H, wrapper.clientHeight, totalRows ); tbody.innerHTML = ''; // 先清空旧行，防止内存堆积 for (let i = start; i < end; i++) { tbody.appendChild(makeRow(i, data[i])); // 逐行构建轻量节点 } }

到这里，一个能扛住 10 万行的基础虚拟滚动表格已经成型。各框架的完整接入示例，可以在仓库的 demos/ 目录里对照阅读。

三、新手最容易踩的 3 个坑 ⚠️

功能跑通只是及格线，下面三个坑几乎人人踩过。

坑一：缓冲区设成 0，一滚就闪白。滚动事件本身有延迟，行刚离开视口就被销毁，往回一滚新行还没渲染出来，页面就闪白。正确做法是在视口上下各多渲染几十行作为缓冲，让内容"提前就位"。

坑二：只增不减，内存一路飙高。很多人只记得渲染，忘了回收。每次滚动都 new 一批节点却不清旧节点，滚 10 分钟内存涨 10 倍。上文那句innerHTML = ''是最基础的一步，事件监听、子组件实例也要同步释放。

坑三：单元格里塞"重家伙"。把图表、富文本、图片全塞进每一行，等于让虚拟滚动白干——行变重了，滚动照样卡。表格内只放纯文本和轻量 DOM，重内容挪到点击后的详情弹层里。

四、数据不说谎：提速幅度有多大 📊

口说无凭，来看一组同机型下的实测对比：

注意看最后一行的规律：数据规模越大，虚拟滚动的优势越夸张——因为它渲染的节点数恒定，与总行数无关。

五、什么时候自己写，什么时候借轮子

手写方案轻量可控，但如果你要的不只是"展示"，就值得看看现成的轮子。SheetJS 官方仓库里就备好了多套对接示例，按需挑选即可：

• 想要 Excel 编辑体验：选 x-spreadsheet，自带熟悉的表格 UI，官方示例脚本在demos/xspreadsheet/xlsxspread.js；
• 超大网格 + 极致性能：选基于 Canvas 绘制的 canvas-datagrid，连单元格都用画布画，几十万行也面不改色；
• 项目已经在用 React / Vue：优先对接生态内的表格组件（如 react-data-grid、vue3-table-lite），接入示例分别见 demos/react/ 与 demos/vue/；
• 只想快速预览一个文件：自己写上面那 30 行代码就够，没必要为一次展示引入几百 KB 的依赖。

六、从今晚开始，不再怕大表格

一个 10 万行的文件，传统渲染是"白屏警告"，虚拟滚动是"0.3 秒就位"——差距不在机器，而在思路。记住这句话：前端永远只渲染用户看得见的东西，剩下的一切，交给滚动条去"假装存在"。

现在就动手。克隆仓库git clone https://gitcode.com/gh_mirrors/sh/sheetjs，把demos/目录翻一遍，再找一个真实的大表格文件跑通你的第一个虚拟滚动表格。等下次产品经理再丢来 20 万行报表时，你可以平静地回一句："明天一早，行。" 🚀

【免费下载链接】sheetjs📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs项目地址: https://gitcode.com/gh_mirrors/sh/sheetjs