能彻底避免主线程卡死，但须绕开两个陷阱：worker无法访问table.cache等主线程变量，须传纯数据并用transferable零拷贝；reload需手动保留分页、选中态和滚动位置。
直接用 Web Worker 处理 layui 表格的前端全文过滤，能彻底避免主线程卡死——但必须绕开两个致命陷阱：不能在 Worker 里碰 table.cache，也不能让 table.reload() 在消息回调里裸奔。
为什么不能在 Worker 里读取或操作 table.cache
Worker 线程完全隔离，拿不到主线程的任何变量，table.cache 是 layui 在主线程维护的对象，Worker 里访问它会直接报 ReferenceError: table is not defined。你传给 Worker 的只能是纯数据（比如 table.cache['yourTableId'] 的深拷贝结果），而且得确保它不包含函数、DOM 节点、Date 对象等无法结构化克隆的值。
- 传之前用
JSON.parse(JSON.stringify(data))最保险（适合无循环引用、无特殊类型的数据） - 更高效的方式是只传关键字段：
data.map(item => ({ id: item.id, name: item.name, status: item.status })) - 别传
layui、table、layer这类全局对象，Worker 里根本不存在
postMessage 传大数据时必须用 transferable，否则内存翻倍
如果你过滤的是上万条记录，每个对象几十个字段，直接 worker.postMessage(filteredData) 会让浏览器把整个数组克隆一份再送进 Worker —— 主线程和 Worker 各持一份，内存占用瞬间飙高，低端安卓机可能直接 OOM。正确做法是把数据转成 ArrayBuffer 或利用 Transferable 接口零拷贝移交。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 简单场景：用
JSON.stringify()+TextEncoder.encode()转成Uint8Array，再传buffer和[buffer]到postMessage - 示例：
const encoder = new TextEncoder(); const buffer = encoder.encode(JSON.stringify(data)).buffer; worker.postMessage({ type: 'filter', keyword }, [buffer]); - Worker 里用
new TextDecoder().decode(e.data.buffer)拿回字符串再JSON.parse - 不这么做，5MB 数据过滤一次，内存多占 10MB，用户切几个标签页就崩
table.reload() 必须手动保留分页、选中态和滚动位置
Worker 返回结果后，如果直接 table.reload({ data: result })，当前页码会跳回第 1 页、所有 checkbox 变未选中、表格滚动条回到顶部——这不是 bug，是 reload 的默认行为。你得自己扛起状态管理。
- 提前存好当前页：
const currPage = table.config.page?.curr || 1; - 用
Set记录已选 ID：window.selectedIds = new Set(table.checkStatus('yourTableId').data.map(d => d.id)); - reload 时显式带上：
table.reload('yourTableId', { data: result, page: { curr: currPage }, done: function(res, curr, count) { /* 遍历 res.data，对 id 存在于 selectedIds 的行调用 layui.$(tr).find('input[type=checkbox]').prop('checked', true) */ } }); - 滚动位置恢复：在
done回调里用layui.$('.layui-table-box').scrollTop(oldScrollTop)
真正难的不是启一个 Worker，而是让主线程和 Worker 之间那几毫秒的消息往返不变成新瓶颈——防抖输入、批量打包关键词、避免每敲一个字就发一次 postMessage，这些细节漏掉一个，UI 就照样卡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
