Web Worker可解决十万级表格关键词过滤导致的UI卡顿问题，需将纯计算逻辑移至后台线程，主线程专注交互响应；Worker文件须轻量、无副作用，仅处理结构化数据并返回结果；主线程应防抖输入、校验关键词、启用Transferable传输、及时终止Worker，并设置超时降级机制；高频场景可结合倒排索引与分片并行处理进一步优化性能。
过滤逻辑必须移出主线程
十万级表格的关键词过滤，本质是遍历每条数据、检查 20+ 字段是否包含关键词。这个操作在主线程执行会直接卡住 UI，用户输入延迟、滚动卡顿、按钮无响应。Web Worker 的作用就是把这段纯计算逻辑（不涉及 DOM 渲染）完整剥离到后台线程运行，让主线程专注响应交互。
Worker 文件要轻量且无副作用
新建 filter.worker.js，它不能访问 document、不能调用 console（建议用 self.postMessage 发送日志）、不能使用任何不可序列化的对象：
- 只接收结构化数据：如
{ data: [...], keyword: 'abc', fields: ['name', 'desc'] } - 用
String.prototype.includes()或正则做匹配，避免创建大量中间字符串 - 返回过滤后数组，或只返回匹配项索引（减少传输体积）
- 禁用自动类型转换，比如不把数字字段转成字符串再比——提前统一字段类型可省下 30% 时间
主线程控制通信节奏与资源
不要每次 input change 都发一次消息。实际做法是：
- 对用户输入加防抖（如 250ms），只在停止输入后触发 filter
- 发送前校验 keyword 长度，空值或单字符直接跳过 Worker，走内存缓存
- 用
worker.postMessage(data, [transferList])传 ArrayBuffer 或 TypedArray 时启用 Transferable，避免大数组拷贝 - 任务完成立即调用
worker.terminate()，防止多个 Worker 同时驻留吃内存 - 监听
worker.onerror和超时（如 8 秒未响应），降级回主线程简单过滤并提示“数据量较大，结果可能不全”
进阶：倒排索引 + Worker 分片处理
如果过滤频率高、字段固定，可以预建轻量倒排索引（比如每个字段值 → 行 ID 列表），存在主线程内存里。Worker 只负责查索引 + 取交集，速度提升一个数量级。更大数据量时，还可让主线程把原始数据按 5000 行分片，启动多个 Worker 并行过滤，最后在主线程合并结果。
立即学习“Java免费学习笔记（深入）”；
