JavaScript 中 Generator 怎么实现分块渲染大数据表格的逻辑-js教程-PHP中文网

generator 可通过暂停执行、分批产出数据，配合事件循环实现大数据表格的流畅分块渲染；核心是将数据按固定大小切片，每次 yield 一批，由调用方控制处理节奏。

javascript 中 generator 怎么实现分块渲染大数据表格的逻辑

Generator 可以通过暂停执行、分批产出数据的方式，配合浏览器的事件循环，把大数据表格的渲染拆成多个微任务，避免主线程长时间阻塞，从而实现流畅的分块渲染。

用 Generator 拆分数据批次

核心思路是把原始数据按固定大小（比如每批 100 行）切片，Generator 每次 yield 一批数据，调用方控制节奏逐批处理。

示例：

function* chunkedData(data, size = 100) {
  for (let i = 0; i <p>这样既不一次性加载全部 DOM 节点，也不需要手动维护索引状态，语义清晰、可复用。</p><h3>结合 requestIdleCallback 或 setTimeout 控制渲染节奏</h3><p>Generator 本身不执行异步，需搭配调度机制。推荐优先用 <code>requestIdleCallback</code>（兼容性好且更精准），降级用 <code>setTimeout(..., 0)</code>。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7377" title="Java Maven Secondary Analysis"><img
														src="https://img.php.cn/upload/skill/000/000/081/179144831942131.jpg" alt="Java Maven Secondary Analysis" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7377" title="Java Maven Secondary Analysis" class="overflowclass">Java Maven Secondary Analysis</a>
													<p class="overflowclass">分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7377" title="Java Maven Secondary Analysis" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

requestIdleCallback：在浏览器空闲时段执行，天然防卡顿
setTimeout：简单可靠，适合老浏览器，但需注意最小延迟（通常 ≥ 4ms）

关键不是“多快”，而是“别占满主线程”——每次只渲染一批，留出时间响应用户操作。

在渲染循环中消费 Generator

用迭代器的 next() 方法逐步取数，每次拿到一批就插入 DOM 或更新虚拟列表。

const iterator = chunkedData(largeDataSet, 50);
function renderNextChunk() {
  const { value, done } = iterator.next();
  if (done) return;
<p>// 批量创建并 append 行（建议用 DocumentFragment 减少重排）
const fragment = document.createDocumentFragment();
value.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = <code><td>${row.id}</td>
<td>${row.name}</td></code>;
fragment.appendChild(tr);
});
tableBody.appendChild(fragment);</p><p>// 下一批等空闲时再执行
requestIdleCallback(renderNextChunk);
}
renderNextChunk();</p>