web worker 应只返回结构化 token 数组而非 html 字符串，以避免重排、xss 风险和结果覆盖；主线程据此 diff 更新 class、用 range 替换文本节点，并基于textcontent对齐 offset。
直接用 Web Worker 做语法高亮，核心不是“能不能”，而是“别让 Worker 返回 HTML 字符串”——它该只返回 token 数组，由主线程决定怎么渲染、何时更新、是否丢弃。
为什么 highlight.js 的 onmessage 写法容易出问题
常见错误是把整个 highlight.min.js 用 importScripts 加载进 Worker，再调用 hljs.highlightAuto() 直接返回 result.value（HTML 字符串）。这看似简单，但埋了三个坑：
- Worker 每次都要重新解析 highlight.js，启动慢，且无法复用已编译的正则规则
-
result.value是带内联span标签的 HTML，主线程插入时可能触发重排，还绕不开 XSS 风险（尤其处理用户输入代码） - 没有 request ID 或版本比对，快速输入时旧结果覆盖新状态，光标错位、高亮闪烁
Worker 应该只做三件事：parse、tokenize、classify
真正适合 Worker 的工作，是纯计算：接收原始字符串 + language，输出结构化 token 列表。例如：
[{type: "keyword", value: "function", offset: 0, length: 8},
{type: "identifier", value: "greet", offset: 9, length: 5},
{type: "punctuation", value: "(", offset: 14, length: 1}]
这样做的好处：
- 主线程可复用已有 DOM 节点，只 diff 更新 class 属性，避免 innerHTML 重写
- token 可缓存（按 content hash + line range），相同代码段二次请求直接返回
- 支持 transferable：用
postMessage(tokens, [tokens.buffer])零拷贝传递大型数组 - 语言逻辑可动态加载：Worker 收到
{lang: "typescript"}后，再import("./ts-parser.js")，不污染初始体积
postMessage 必须带 requestId 和 editorVersion
编辑器状态永远在变，Worker 不知道当前哪一帧才是“最新”。所以每次发请求必须附带两个字段：
-
requestId：随机字符串或递增序号，用于主线程匹配响应 -
editorVersion：可取cm.state.doc.version（CodeMirror 6）、monaco.editor.getModel(...).getVersionId()，或简单用Date.now()时间戳
Worker 处理完后原样回传这两个字段。主线程收到响应时，先比对 editorVersion 是否仍有效，过期就丢弃——不更新 DOM，也不触发任何副作用。
主线程如何安全注入 token 结果
拿到 token 数组后，不能直接 el.innerHTML = ...。正确路径是：
- 遍历 token，为每个生成一个
span，设置class="hljs-${token.type}"，保留原始文本位置（textContent） - 用
Range+DocumentFragment替换原code节点的文本节点，避免整段重绘 - 若编辑器用了
contenteditable或textarea模拟，需同步维护光标位置：根据 token offset 计算字符偏移，调用setSelectionRange或更新cursorstate - 禁用浏览器默认的
user-select: text，改用自定义 selection 样式，防止双击选中 span 导致样式断裂
最易忽略的一点：Worker 返回的 token offset 是基于原始字符串的字节偏移，而 DOM 中的文本节点可能被空格折叠、换行归一化。务必在主线程用 el.textContent 作基准重新对齐，否则高亮会整体偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
