Web Worker 只能对 HTML 字符串做非 DOM 的静态分析，如正则提取标签、栈模拟嵌套、属性切分、频次统计、XSS 模式识别、语义分片等，结果须为 JSON-serializable 数据。
Web Worker 不能解析或操作 HTML 字符串生成 DOM 树，也不能调用 DOMParser 或 innerHTML —— 这些 API 在 Worker 线程中被明确禁用。所谓“预处理 HTML 文档结构与标签树”，只能指对纯文本 HTML 字符串做**非 DOM 的静态分析**，比如正则提取标签名、统计嵌套层级、识别自闭合标签、校验属性格式等。
Worker 中能做的 HTML 静态分析任务有哪些
只要不碰 DOM、不依赖 document 或 window，以下操作可在 Worker 中安全并发执行：
- 用
RegExp或字符串遍历提取所有<tag>开始/结束标签、注释、CDATA 区段 - 基于栈模拟标签嵌套深度，检测不匹配的
</div>或缺失闭合 - 解析
class、id、data-*属性值（仅字符串切分，不求值） - 统计各标签出现频次、计算文本节点长度占比、识别疑似 XSS 模式（如
<script>出现位置） - 将 HTML 字符串按
<section>或<article>分片，为后续主线程 DOM 批量挂载做准备
注意：所有结果必须是 JSON-serializable 数据（对象、数组、字符串、数字），不能含函数、DOM 节点、NodeList 等。
为什么不能在 Worker 里用 DOMParser.parseFromString
DOMParser 在绝大多数浏览器的 Worker 环境中不可用（Chrome/Firefox/Safari 均报 ReferenceError: DOMParser is not defined）。即使某版本临时支持，其返回的 Document 对象也无法序列化传回主线程，且违背 Web Worker 设计初衷——它本质是 DOM 绑定 API，强制放入 Worker 会破坏线程隔离性。真正需要构建 DOM 树的场景，必须回到主线程，Worker 只能交付“结构元数据”（如标签路径数组、属性键值对列表、错误位置偏移量）。
立即学习“前端免费学习笔记（深入）”；
如何让主线程高效消费 Worker 的 HTML 分析结果
主线程拿到 Worker 返回的结构化数据后，应避免逐个 createElement 拼接。推荐做法：
- Worker 输出一个扁平化的节点描述数组：
[{ tag: 'div', attrs: { class: 'container' }, children: [...] }] - 主线程用
document.createElement+element.setAttribute构建片段，但只做一次documentFragment批量 append - 若需高亮或标记特定节点，Worker 提前计算好 CSS 选择器路径（如
'body > main > article:nth-child(2) > h1'），主线程用querySelector定位，而非遍历树 - 对超长 HTML（>500KB），Worker 应分块返回分析进度（如每 10KB 发一次
{ chunkId, tags: [...], errors: [...] }），主线程用requestIdleCallback逐步合并，防阻塞渲染
transferable 优化 HTML 字符串传输的实操细节
HTML 字符串本身无法 transfer，但可转为 Uint8Array 后移交：
const encoder = new TextEncoder(); const uint8Array = encoder.encode(htmlString); worker.postMessage(uint8Array, [uint8Array.buffer]);
Worker 中用 new TextDecoder().decode(uint8Array) 还原字符串，避免主线程深拷贝大字符串带来的 GC 压力。注意：编码必须一致（推荐 UTF-8），且 htmlString 不含代理对（surrogate pairs）时才完全安全；含 emoji 或生僻字建议改用 ArrayBuffer + TextEncoder 显式处理。
真正难的不是并发跑多少个 Worker，而是让每个 Worker 处理的“HTML 片段”语义完整——比如不能把一个 <table> 拆成两半发给不同 Worker。结构感知的分片逻辑必须由主线程完成，这点常被忽略。
