关键在于流式分块解析与增量渲染：用FileReader切片+Papa Parse边读边转，Web Worker避卡顿，虚拟滚动控DOM量，配合容错、暂停续解及动态列筛选。
直接在前端实时展示 GB 级 CSV 数据，关键不是“全量加载”，而是用流式处理把数据切成小块、边读边转、边转边显。整个过程不依赖后端中转，原始文件始终留在用户本地，既保护隐私，又规避服务端带宽与内存压力。
用 FileReader + Papa Parse 实现分块读取
浏览器无法直接流式读取本地文件，需借助 FileReader 的 readAsArrayBuffer 配合 Papa Parse 的 parse 分段能力。核心是手动切片（slice），避免一次性读入全部内容：
- 获取用户选择的
File对象后，按固定大小（如 4MB）切片，逐片调用Papa.parse() - 每片解析启用
header: true和dynamicTyping: true，自动识别字段类型 - 用
chunk回调接收每批结果，立即推入前端状态（如 React 的useState或 Vue 的响应式数组） - 跳过空行和注释行：
skipEmptyLines: true, comments: '#'
配合 Web Worker 避免主线程卡顿
GB 文件的字符串分割、类型转换、JSON 构造等操作计算密集，必须移出主线程：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 将 Papa Parse 的解析逻辑封装进 Web Worker，主页面只负责传递
ArrayBuffer片段和接收解析后的行数组 - Worker 内使用
Papa.parse(chunkBuffer, { worker: false, ... })—— 注意：worker 模式在 Worker 线程里要禁用，否则会嵌套创建新 Worker - 主页面收到每批数据后，仅做轻量处理（如生成唯一 key、格式微调），立刻触发 UI 更新
增量渲染 + 虚拟滚动保障流畅体验
即使解析很快，一次性渲染数十万 <tr> 仍会导致页面冻结。必须限制 DOM 节点数量：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>不把所有解析结果存进一个大数组，而是维护一个“窗口缓存”（例如当前可视区域 ± 200 行）</li>
<li>监听滚动位置，动态替换表格 <code><tbody> 内容；可用开源库如 <code>react-window 或 vue-virtual-scroller
异常容错与用户控制机制
GB 级文件极易含脏数据（乱码、换行符嵌套、字段数不一致），不能让一次报错中断整个流程：
- 启用
error回调捕获每片内的解析错误，记录行号与错误类型，但继续处理后续 chunk - 提供暂停/恢复按钮：通过保存当前已处理字节偏移量（
offset），实现断点续解析 - 允许用户在解析中动态筛选列（如勾选只看“订单号、金额、时间”三列），用
transform配置提前过滤字段，减少传输与渲染负担 - 解析完成后可导出当前视图为精简 CSV，或一键复制选中行到剪贴板
