Generator 实现大体积数据流分批次加载，核心是用 yield 将全量任务切片为微任务，交还控制权给浏览器，避免主线程阻塞、内存暴涨，支持边读边解析、渐进渲染与可控中断。
用 Generator 实现大体积数据流的分批次加载，核心是把“一次性吐出全部”变成“按需一帧一帧给”，让浏览器不卡、内存不爆、用户感知更顺滑。
控制数据产出节奏，避免主线程阻塞
前端处理几万行表格、日志或图表数据时，若直接 JSON.parse() 全量解析再渲染，JS 主线程会长时间占用，页面直接无响应。Generator 通过 yield 暂停执行，把大任务切片成微任务，交还控制权给浏览器做渲染和交互：
- 每次
yield后，浏览器有机会执行 UI 更新、响应滚动或点击 - 配合
requestIdleCallback或setTimeout(..., 0)调度，可进一步平滑节奏 - 示例：逐批解析 JSON 行格式（JSONL）文件，每 100 行 yield 一次，交由 React/Vue 渐进更新列表
对接流式数据源，实现真正“边读边用”
不是等整个文件下载完才开始处理，而是利用 ReadableStream + Generator 组合，拿到数据块就解析、就分批产出：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用
fetch(url).then(res => res.body.getReader())获取流读取器 - 在生成器内部循环
reader.read()，将每次读到的Uint8Array解码为文本，按行或按记录拆分 - 累积够一批（如 500 条），
yield出去；剩余未闭合记录缓存到闭包变量中，下一轮拼接 - 这样从网络层到应用层全程零全量缓存，内存占用恒定在几百 KB 级别
与 UI 渲染解耦，支持渐进式展示与加载中状态
Generator 返回的是迭代器，天然适配 React 的 useEffect + useState 或 Vue 的 v-for + watch，让 UI 只响应“新批次到达”事件：
立即学习“前端免费学习笔记（深入）”；
- 初始状态显示骨架屏或“加载中…”提示
- 每
iterator.next()得到一批数据，就setData(prev => [...prev, ...batch])合并渲染 - 用户可滚动查看已加载部分，无需等待全部完成；支持取消（提前终止迭代器）
- 比单纯用
async/await + for...of更易中断、更可控
注意边界：不要在 yield 中做重计算或 DOM 操作
Generator 本身不解决计算性能，只解决调度和内存问题。若每批数据都需要复杂转换（如坐标投影、加密解密、图像缩放），仍可能卡顿：
- 重逻辑应移入 Web Worker，Generator 只负责协调输入输出
- 避免在
yield前调用JSON.stringify()或深克隆大批量对象 - 对超长字符串做
slice()分段而非正则全局匹配，防止隐式回溯耗时
