Worker专注拼写纠错的CPU密集计算（如编辑距离、拼音匹配、N-gram验证、规则引擎），主线程负责防抖提交、位置映射渲染、缓存去重与降级联动，通信仅传结构化轻量数据，词典分层加载并预编译规则。

Worker 本身不提供拼写检查能力，也不能直接访问 DOM 或触发浏览器 spellcheck。但它能高效承担拼写纠错中真正耗 CPU 的部分——比如编辑距离计算、词形匹配、规则校验等。实现“实时”效果的关键，不是让 Worker 做所有事，而是让它专注算，主线程专注显和控。

核心算法任务交给 Worker

拼写检查的计算密集环节，适合剥离到 Worker 中并行处理：

• Levenshtein / Damerau-Levenshtein 距离计算：对输入词与词典候选做快速相似度打分
• 拼音/形近字加权匹配：比如“做业”→ 拼音 “zuo ye” → 匹配 “作业（zuo ye）” + “作夜（zuo ye）”，再结合字形（“做/作”偏旁差异）降权
• N-gram 频率验证：查“做业”是否出现在百万级中文二元组语料中；若未出现，而“作业”高频，则倾向后者
• 规则引擎执行：如“的得地”使用模式识别、“再在”混淆检测、“已以”误用等基于正则+上下文的轻量逻辑

主线程负责低延迟交互闭环

Worker 算得再快，没主线程配合也出不了“实时”体验。以下必须由主线程完成：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 防抖+增量提交：监听 input，停顿 300–400ms 后只发送光标附近 1–2 个词（而非整段），减少数据传输量
• 位置映射与高亮渲染：Worker 返回 {pos: [5,7], original: "做业"}，主线程需精准定位 DOM 文本节点中第 5–7 字符，并插入 <span class="spell-error"></span> 或 CSS 波浪线
• 结果缓存与去重：相同文本片段（如连续输入“做业”）不重复发请求；已校验过的词组加入 Map 缓存，命中即跳过 Worker 调用
• 降级策略联动：网络不可用时，主线程自动切换为纯 Worker + 内置词典模式；恢复后优先走服务端上下文增强校验

通信设计要轻量且结构化

主线程与 Worker 之间不传原始 DOM 或大段 HTML，只传最小必要数据：

立即学习“前端免费学习笔记（深入）”；

• 发送给 Worker 的 payload 示例：{text: "做业", context: ["昨天", "很", "认真"], lang: "zh"}
• Worker 返回格式示例：{id: "inp-123", pos: [3,5], original: "做业", suggestions: ["作业", "作夜"], score: 0.92}
• 避免频繁通信：一次 input 可能触发多次校验，但应合并成单次消息；Worker 内部可批量处理多个待检词，再统一返回
• 类型安全建议：用 TypeScript 定义 SpellCheckRequest 和 SpellCheckResponse 接口，两端共用，减少序列化错误

本地词典与规则库的加载策略

Worker 启动时加载资源，影响首屏校验延迟，需优化：

• 词典分层加载：高频 500 词（如“作业”“已经”“因为”）内嵌在 Worker 脚本中；中频 5k 词用 importScripts 异步加载 JSON；低频词走网络兜底
• 规则预编译：正则表达式提前 new RegExp() 实例化，避免每次校验都重复编译
• SharedArrayBuffer（可选）：若支持，可用其共享词典 ArrayBuffer，避免重复内存拷贝（注意跨域与安全限制）
• 按需解压：词典用 LZString 压缩，Worker 中解压后缓存在 self.dict，后续复用