前端大数组渲染卡顿，JS大数据分片处理实战方案

原创已于 2026-08-24 03:54:11 修改 · 148 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-08-24 00:27:27 首次发布

前端大数组渲染卡顿，JS 大数据分片处理实战方案

做前端开发或多或少都遇到过大数据渲染卡顿的问题。后台管理系统、数据可视化、日志列表页面，一旦一次性返回上万条、甚至几万条数据，页面瞬间卡死，滚动卡顿、按钮点击无响应，严重的时候直接白屏。

很多新手第一反应是质疑电脑配置、接口性能，其实大部分情况根本不是后端的问题，而是前端一次性渲染海量 DOM、主线程被长时间阻塞导致的。JS 是单线程语言，大批量循环渲染、DOM 批量插入，会阻塞页面渲染和用户交互。

今天结合我线上真实落地的分片渲染（时间切片）方案，不用虚拟列表、不用分页，纯原生 JS 实现大数据无痛渲染，完美解决大数据卡死问题，代码可直接复用。

一、先复现问题：一次性渲染大数据有多卡？

我们先写一段反面代码，模拟前端一次性渲染 2 万条列表数据。这也是很多人日常写的劣质代码，看着没问题，数据一多直接崩掉。

// 生成20000条模拟数据 function generateData() { const list = []; for (let i = 1; i <= 20000; i++) { list.push({ id: i, title: `日志记录_${i}`, time: new Date().toLocaleString() }); } return list; } // 一次性全部渲染（卡顿元凶） function renderAll() { const dataList = generateData(); const container = document.getElementById("list"); let html = ""; // 超大循环 + 一次性 innerHTML dataList.forEach(item => { html += `<div class="item">${item.id} ${item.title} ${item.time}</div>`; }); container.innerHTML = html; } renderAll();

运行这段代码你会明显感觉到：页面长时间空白、鼠标转圈、几秒后才渲染完成。原因很简单：大量循环计算 + 超大字符串赋值 DOM，独占主线程，浏览器无法回流、重绘、响应用户操作。

二、为什么分页和虚拟列表不一定适合？

很多人第一反应：卡顿那就做分页啊？但实际业务里，很多场景不能分页。比如日志查询、批量导出、大数据筛选，用户需要一次性加载全部数据，自由上下滚动。

虚拟列表虽然性能极致，但封装复杂、改造成本高，简单页面完全没必要上重量级组件。这时候，JS 分片渲染（时间切片）就是性价比最高的方案。

三、核心原理：分片 + requestAnimationFrame

原理非常好理解：不要一口气干完所有渲染任务。我们把几万条数据，切割成每二三十条为一小片，利用浏览器每一帧的空闲时间分批渲染。

借助 requestAnimationFrame 帧动画机制，跟随浏览器刷新节奏渲染，保证每一帧只做少量任务，主线程不阻塞，页面全程流畅不卡顿。

四、完整版分片渲染实战代码（可直接上线）

我封装了一个通用的大数据分片渲染函数，支持自定义每帧渲染条数、自动循环、渲染完成回调，通用性极强。

// 大数据分片渲染核心函数 function renderBigDataBySlice(container, data, sliceSize = 30) { let index = 0; // 当前渲染索引 // 分片渲染核心逻辑 function render() { // 终止条件：全部渲染完成 if (index >= data.length) return; // 截取当前分片数据 const sliceData = data.slice(index, index + sliceSize); let html = ""; sliceData.forEach(item => { html += `<div class="item" style="padding:4px;border-bottom:1px solid #eee;">${item.id} ${item.title} ${item.time}</div>`; }); container.innerHTML += html; // 索引步进 index += sliceSize; // 下一帧继续渲染 requestAnimationFrame(render); } // 启动渲染 render(); } // 调用测试 const listData = generateData(); const domContainer = document.getElementById("list"); renderBigDataBySlice(domContainer, listData, 30);

3、常规后台列表、可分页场景 → 直接后端分页，从根源减少前端压力。