不能直接在主线程处理几万行表格数据，因为会阻塞UI导致页面无响应；应使用Web Workers剥离计算，主线程仅负责安全渲染。
为什么不能直接在主线程里处理几万行表格数据
因为会卡死页面。浏览器主线程既要响应用户点击、滚动，又要执行 JS 计算，一旦 for 循环跑上 10 万次字符串分割、类型转换、聚合统计，UI 就彻底冻结，连右键菜单都弹不出来。这不是“慢”，是“无响应”——用户刷新页面前你已经失去信任。
常见错误现象：RangeError: Maximum call stack size exceeded（递归过深）、DOMException: Failed to execute 'appendChild' on 'Node'（批量插入时 DOM 批量重排触发强制同步渲染）、控制台报 Long task 警告。
- Web Workers 是唯一能真正把计算剥离主线程的机制，它不共享内存，也不访问
document或window - 但 Workers 不能直接操作 DOM，所以表格渲染必须回到主线程，预处理结果只能传回结构化数据（如
Array或TypedArray） - 别用
SharedArrayBuffer—— 它需要crossOriginIsolated环境，本地开发或 HTTP 非 HTTPS 环境基本不可用，且调试极难
如何让 Worker 接收 CSV/JSON 表格数据并返回处理后的行数组
核心是序列化 + 分片 + 类型预判。Worker 本身没有 fetch 或 FileReader，所有原始数据必须由主线程读取后通过 postMessage 发送过去。
使用场景：上传一个 50MB 的 CSV 文件，需去重、字段校验、数值归一化、生成分页元数据（总行数、每页 100 行的 offset 映射表）。
立即学习“前端免费学习笔记（深入）”；
- 主线程用
FileReader.readAsText(file)读取后，调用worker.postMessage({ type: 'process', data: csvString }) - Worker 内避免用
split('\n')直接切——CSV 含换行符的字段会崩，改用轻量 CSV 解析器如papaparse的核心逻辑（仅解析，不依赖 DOM） - 对每一行做
JSON.parse或Number()转换时加try/catch，失败则保留原始字符串，避免整批中断 - 返回前用
structuredClone（现代浏览器）或手动扁平化对象，确保可序列化；别传Date实例或RegExp，它们会被转成空对象
主线程如何安全高效地把 Worker 返回的数据渲染成 HTML 表格
渲染不是瓶颈，频繁 DOM 操作+重排才是。直接循环 appendChild 几千次，性能比预处理还差。
参数差异：innerHTML 快但有 XSS 风险；DocumentFragment 安全但写法略啰嗦；createDocumentFragment + insertAdjacentHTML 是平衡点。
- 绝对不要在循环里查
document.getElementById('table').appendChild(row)—— 每次都触发重排 - 推荐方案：Worker 返回的是纯数据数组
rows，主线程用rows.map(r => `<tr> <td>${escapeHtml(r.name)}</td>...</tr>`).join('')生成 HTML 字符串，再一次性写入tbody.innerHTML -
escapeHtml必须自己实现（str.replace(/&/g, '&').replace(/, '），否则用户数据含 <code><script></script>会执行 - 如果表格需排序/筛选，别重渲染整个
tbody，只更新数据源 + 用requestAnimationFrame批量重绘可见区域（配合虚拟滚动）
Worker 通信和错误边界怎么设才不至于白忙活
Worker 不报错就等于没运行成功。常见问题不是逻辑错，而是消息通道断开、超时、序列化失败。
性能影响：每次 postMessage 都是结构化克隆，传 10MB 对象可能卡住主线程几百毫秒——这和直接计算没区别。
- 给 Worker 设置超时：
const timeout = setTimeout(() => worker.terminate(), 30000)，收到message后立即clearTimeout - 主线程监听
worker.onerror，但注意：它捕获不到 Worker 内部未捕获的异常，只捕获初始化失败或通信错误 - Worker 内用
self.onmessage，别用addEventListener('message')—— 后者在 Safari 旧版本中不触发 - 大文件分块处理：主线程把 CSV 按 5000 行切片，逐个
postMessage，Worker 处理完发回结果，主线程合并。这样即使某片失败，也不影响其他
最容易被忽略的是：Worker 的 console.log 在主线程开发者工具里默认不显示，得打开 “Workers” 标签页才能看到输出。没开这个就等于盲调。
