Web Worker 是前端处理图论等 CPU 密集型任务的可靠方案，通过将 Dijkstra 等算法移至独立线程避免主线程冻结，确保 UI 响应流畅；其核心是纯计算、消息通信、数据序列化与合理优化。
Web Worker 是前端处理耗时计算的可靠方案，尤其适合图论这类 CPU 密集型任务（如 Dijkstra、Floyd-Warshall、A* 等）。它能避免阻塞主线程，保持页面响应流畅。
为什么必须用 Worker？
浏览器主线程负责渲染、事件、脚本执行。若直接在主线程运行大规模图算法（比如 10⁴ 节点的邻接表最短路径），会卡住 UI 数秒甚至更久，用户无法点击、滚动、输入——这不是“慢”，而是“冻结”。Worker 把计算挪到独立线程，主线程照常工作。
基础结构：分离计算逻辑与通信
核心原则：Worker 只做纯计算，不操作 DOM；数据通过 postMessage 传递，格式限定为可序列化对象（不能传函数、class 实例、DOM 节点）。
- 主线程创建 Worker，传入图数据（如
{nodes: [...], edges: [...]}）和参数（起点、终点、算法名） - Worker 解析数据，执行算法，只返回结果（如
{path: [0,2,5], distance: 14.3}） - 主线程收到结果后，再更新 UI（高亮路径、显示距离等）
实战示例：Dijkstra 在 Worker 中运行
假设你有一个无向带权图，节点数 ≤ 5000，边用邻接表表示：
立即学习“前端免费学习笔记（深入）”；
1. 创建 worker.js（保存为 dijkstra-worker.js）：
// dijkstra-worker.js
self.onmessage = function(e) {
const { graph, start, end } = e.data;
<p>// 标准 Dijkstra 实现（使用最小堆可优化，此处用简单数组模拟）
const dist = new Array(graph.nodes.length).fill(Infinity);
const prev = new Array(graph.nodes.length).fill(-1);
const visited = new Array(graph.nodes.length).fill(false);</p><p>dist[start] = 0;</p><p>for (let i = 0; i < graph.nodes.length; i++) {
let u = -1;
for (let j = 0; j < graph.nodes.length; j++) {
if (!visited[j] && (u === -1 || dist[j] < dist[u])) u = j;
}
if (u === -1 || dist[u] === Infinity) break;
visited[u] = true;</p><pre class='brush:php;toolbar:false;'>for (const edge of graph.edges[u] || []) {
const v = edge.to;
const alt = dist[u] + edge.weight;
if (alt < dist[v]) {
dist[v] = alt;
prev[v] = u;
}
}}
// 回溯构造路径 const path = []; let cur = end; while (cur !== -1) { path.push(cur); cur = prev[cur]; } path.reverse();
self.postMessage({ success: true, path, distance: dist[end] === Infinity ? null : dist[end] }); };
2. 主线程调用：
// main.js
const worker = new Worker('./dijkstra-worker.js');
<p>worker.onmessage = function(e) {
const { success, path, distance } = e.data;
if (success) {
highlightPathOnCanvas(path); // 或更新 React state
document.getElementById('result').textContent =
<code>最短距离：${distance}, 路径：${path.join(' → ')}</code>;
}
};</p><p>// 发送图数据（确保是 plain object）
const graphData = {
nodes: Array.from({ length: 1000 }, (_, i) => i),
edges: [
/<em> 邻接表：edges[i] = [{to: j, weight: 5}, ...] </em>/
]
};</p><p>worker.postMessage({
graph: graphData,
start: 0,
end: 999
});</p>关键优化与注意事项
-
数据尽量扁平化：避免嵌套过深的对象或大型字符串。图数据优先用
Uint32Array或Float64Array存储节点 ID 和权重，Worker 中可直接用new SharedArrayBuffer（需配合 Atomics）进一步提速 -
分片或增量计算：对超大图（如 10⁵+ 节点），可让 Worker 分批计算多源最短路径，或实现迭代式算法（如 Bellman-Ford 的每轮松弛），用
postMessage回传中间状态用于进度条 -
错误隔离：Worker 内抛异常不会影响主线程。务必在 Worker 中加 try/catch，并
postMessage({ error: '...' })通知失败原因 -
终止可控：提供取消机制 —— 主线程调用
worker.terminate()，Worker 内监听self.onmessage接收 cancel 指令并提前退出循环
不复杂但容易忽略：算法本身无需修改，只需把输入/输出换成消息通信。真正决定体验的是数据结构设计和边界处理——图数据传得干净，结果收得明确，Worker 就是前端图论的稳定引擎。
