generator 在大屏可视化中不直接渲染，而是作为协程控制数据流节奏，配合 echarts、d3 或 canvas 实现分批、低阻塞、可中断的数据输出，避免主线程卡死。
Generator 在大屏数据可视化中不直接“渲染”，而是作为控制数据流节奏的协程工具，配合渲染框架（如 ECharts、D3 或 Canvas）实现大数据量的分批、低阻塞、可中断的输出，避免主线程卡死。
用 Generator 拆解大数据为可控批次
面对数万条数据点，一次性传给图表库常导致页面冻结。Generator 可将原始数据集封装为惰性序列，每次只吐出一小块（如 500 条），让渲染有喘息时间。
- 定义一个生成器函数，接收完整数据数组和每批大小：function* chunkData(data, size) { for (let i = 0; i
- 调用时获得迭代器：const iterator = chunkData(largeDataset, 500);
- 后续通过 iterator.next() 逐批获取，而非一次性加载全部
结合 requestIdleCallback 或 setTimeout 实现非阻塞调度
单纯分批还不够——若在单次调用中连续执行几十次 next()，仍会阻塞渲染。需把每一批的处理“让出”给浏览器空闲时间或事件循环间隙。
- 用 requestIdleCallback 在浏览器空闲时推进一批：requestIdleCallback(() => { const { value, done } = iterator.next(); if (!done) renderBatch(value); });
- 或用 setTimeout(..., 0) 把每批放入微任务/宏任务队列，保证 UI 更新机会
- 关键点：每次只处理 1 批，然后交还控制权，不贪心
支持暂停、恢复与动态调整批次
大屏常需响应用户交互（如拖拽、缩放、切换维度）。Generator 天然支持状态保持，可在任意时刻暂停，并在条件满足后继续。
- 保存当前迭代器实例（如挂载到组件 state 或 class 成员），而不是每次重新创建
- 用户触发重绘时，可先 iterator.return() 清理未完成批次，再根据新参数重建生成器
- 根据设备性能或网络状况动态调整 size 参数（如低端设备设为 200，高端设为 1000）
与可视化库协同的关键细节
ECharts 等库本身不识别 Generator，需手动桥接。核心是：每次只调用一次 appendData（如 ECharts 的 streaming 支持），而非全量重绘。
- 启用 ECharts 的 appendData 模式（需 series.type = 'line' / 'bar' 等并开启 streaming）
- 对 Canvas 自绘场景，每批拿到数据后只绘制新增区域，用 clearRect 局部擦除+重绘，避免全 canvas 刷新
- 务必在每批渲染后调用 chart.resize()（如有响应式需求）或手动触发防抖后的重布局
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
