worker线程只能卸载纯计算型数据准备逻辑，不能处理任何ui操作；适合卸载的逻辑需满足：不依赖主线程api、输入输出可序列化、无副作用、耗时显著且频繁触发。

Worker 线程不能卸载“UI 逻辑”，因为它根本无法操作 DOM、访问 CSSOM、调用 render 函数，也不认识 React/Vue 组件或任何 UI 框架的更新机制。所谓“卸载 UI 逻辑”，本质是误读——真正能卸载的，是 与 UI 相关但纯计算、无副作用的前置处理逻辑，比如数据转换、校验、排序、过滤、格式化、虚拟滚动坐标计算、图表数据聚合等。

明确哪些逻辑可卸载

只有满足以下全部条件的代码，才适合放进 Worker：

• 不依赖 document、window、localStorage、canvas.getContext() 等主线程专属 API
• 输入输出均为可序列化的纯数据（如数组、对象、number、string、ArrayBuffer）
• 执行过程无副作用：不修改全局变量、不触发事件、不发起网络请求（除非你主动封装 fetch）、不读写 cookie
• 耗时显著（>10ms），且频繁触发（如拖拽中实时计算、搜索框防抖后批量处理）

典型可卸载场景举例

不是“UI 逻辑”，而是支撑 UI 的数据准备逻辑：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

• 表格大数据排序/过滤：10 万条记录按多字段动态排序，结果传回后直接替换 useState 数据
• 富文本内容解析：将 Markdown 或自定义语法转为 AST 节点树，再由主线程映射为 React Element
• 时间轴渲染坐标计算：根据起止时间、容器宽度、缩放比例，批量算出每个事件块的 left/top/width
• 图表聚合计算：原始采样点 → 按时间桶聚合均值/最大值 → 生成折线路径点数组
• 拖拽布局碰撞检测：给定当前拖拽坐标和所有目标区域 boundingRect，返回可放置位置索引

主线程与 Worker 的协作边界

必须守住这条线：Worker 只做“算”，主线程只做“显”。

• Worker 内：接收原始数据 + 配置参数 → 执行计算 → postMessage 返回结构化结果（如 { type: 'sort-done', data: [...] }）
• 主线程内：onmessage 收到后，仅同步更新状态（useState / ref / store），由框架自动触发 re-render；绝不在此回调里再做 map/filter/JSON.parse 等二次处理
• 避免反模式：不要让 Worker 返回 JSX 字符串或组件实例；不要在 Worker 里 import 组件文件；不要试图让 Worker “渲染 Canvas”——OffscreenCanvas 是例外，但需显式 transfer，且仍由主线程 attach 到 visible canvas

实际落地建议

降低接入成本，提升稳定性：

• 用 Transferable 传大数组：postMessage({ data }, [data.buffer])，避免克隆开销
• Worker 初始化失败或计算超时，主线程要有 fallback：显示“加载中…”并提供手动重试按钮
• 对高频调用（如滚动中连续触发），用 requestIdleCallback 或节流控制 Worker 调用频次，防止消息队列堆积
• React 场景下，配合 useWorker Hook（或 react-webworker）管理生命周期，componentWillUnmount 中 terminate