必须用Web Worker做布局计算，因为力导向等算法迭代密集、耗时长，节点超200时单帧计算达几十毫秒，直接在主线程运行会导致拖拽卡顿、缩放掉帧、点击无响应；Worker提供独立线程，纯数学运算与DOM渲染解耦，确保UI流畅。
为什么必须用Worker做布局计算
弹力布局、层级展开、力导向算法等拓扑自动布局，本质是反复迭代节点间斥力/引力并更新坐标的过程。节点数超200后，单帧计算常达几十毫秒——直接在主线程运行，用户拖拽会卡顿、缩放会掉帧、点击无响应。Web Worker 提供独立执行环境，可并行运行纯数学运算，与 DOM 渲染完全解耦。
Worker中只做三件事：算位置、管状态、发结果
布局逻辑应严格限定在 Worker 内部，禁止访问任何 DOM 或 window 对象：
- 接收主线程传入的初始数据（如节点列表、边关系、参数 A/B）和当前拖拽偏移映射（
moveMap） - 用固定时间步长（如 16ms）推进物理模型，每轮只更新节点三维坐标（
x, y, z或p3()） - 将收敛后的坐标快照（建议含时间戳）通过
postMessage发回，格式简洁如：{ result: { "node-1": [120, 85, 0], "node-2": [310, 142, 0] } }
主线程如何安全同步布局结果
不能每次收到消息就全量重绘，要兼顾性能与视觉连贯性：
- 监听 Worker 的
message事件，用dataModel.getDatas().forEach（HT）或原生document.getElementById(id).setAttribute('cx', x)（SVG）批量更新节点位置 - 对连线端点做绑定式更新：JS 中维护每个
<line>对应的起点/终点节点引用，布局结果到达后，直接改line.setAttribute('x1', nodeA.x)等属性 - 若需平滑过渡，主线程缓存最近两帧坐标，在
requestAnimationFrame中线性插值渲染，避免跳跃感
实际部署要注意的细节
Worker 不是银弹，几个易错点直接影响可用性：
立即学习“前端免费学习笔记（深入）”；
- 不要高频通信：布局未收敛前，Worker 每秒发 1–2 次中间结果即可；最终收敛态再触发一次完整刷新
-
初始化要轻量：Worker 启动时仅加载核心算法函数，避免
importScripts引入大型库（如 D3 布局模块） -
异常要有兜底：Worker 内加
try/catch，出错时发带 error 字段的消息，主线程降级为静态布局或提示“计算失败” -
响应拖拽要及时：用户拖动节点时，主线程立即更新该节点位置并通知 Worker 当前偏移（
moveMap），Worker 以此为锚点继续迭代，而非从头计算
