HTML5中用Worker异步生成迷宫需三点：一、Worker内禁用DOM，用纯数组和自实现shuffle；二、主线程用new URL('./w.js', import.meta.url)可靠加载Worker；三、生成的grid数组可直接用于A*或Canvas渲染，无需二次处理。
在 HTML5 中用 Worker 异步生成大规模随机迷宫路径数据，核心是把耗时的迷宫算法（如 DFS、Prim 或递归分割）从主线程剥离，避免阻塞 UI，同时保证数据结构可序列化、通信高效、路径结果准确可用。这不是简单“扔进 Worker”，而是需兼顾生成逻辑、通信设计与前端渲染协同。
以下分三块讲清楚关键实操要点：
一、Worker 内必须用纯算法+数组结构，禁用 DOM 和闭包
迷宫生成本质是图遍历或网格连通性构造，Worker 里不能操作 canvas、document 或调用任何依赖主线程的对象。推荐使用二维布尔/数字数组表示格子状态（0=路，1=墙），配合标准随机数（`Math.random()` 可用，但注意其非密码安全，对迷宫够用）。例如，DFS 生成器应返回一个 grid 数组和起点/终点坐标：
// maze-worker.js
self.onmessage = function(e) {
const { rows, cols } = e.data;
const grid = Array(rows).fill().map(() => Array(cols).fill(1)); // 全墙
const visited = Array(rows).fill().map(() => Array(cols).fill(false));
function dfs(x, y) {
visited[x][y] = true;
grid[x][y] = 0;
const dirs = [[-2,0],[2,0],[0,-2],[0,2]];
shuffle(dirs); // 自定义洗牌函数
for (const [dx, dy] of dirs) {
const nx = x + dx, ny = y + dy;
if (nx > 0 && nx < rows-1 && ny > 0 && ny < cols-1 && !visited[nx][ny]) {
grid[x + dx/2][y + dy/2] = 0; // 打通中间墙
dfs(nx, ny);
}
}
}
dfs(1, 1); // 从(1,1)开始，确保边界留墙
self.postMessage({
grid,
start: [1, 1],
end: [rows - 2, cols - 2]
});
};注意：所有变量必须显式声明，不依赖外部作用域；shuffle 要自己实现（不能用 Array.prototype.sort(() => Math.random() - 0.5)，因排序不稳定且不可控）。
立即学习“前端免费学习笔记（深入）”；
二、主线程用 `new Worker()` 加载，并用 `import.meta.url` 避免路径错误
Worker 脚本路径解析以当前 HTML 页面为基准，不是以 JS 文件位置。硬写相对路径极易出错，尤其在构建工具中。**唯一可靠方式是用 ES 模块语法动态获取绝对 URL**：<script type="module">
const worker = new Worker(new URL('./maze-worker.js', import.meta.url), {
type: 'module'
});
worker.onmessage = function(e) {
const { grid, start, end } = e.data;
renderMazeOnCanvas(grid); // 主线程负责绘制
console.log('迷宫生成完成，尺寸：', grid.length, '×', grid[0].length);
};
worker.postMessage({ rows: 101, cols: 101 }); // 发送参数，奇数便于DFS打墙
</script>✅ 这种写法在 Vite、Webpack、原生浏览器中均能正确解析路径，无需担心 /app/ 或 /sub/ 子目录问题。若不用模块，可用 new Worker('/js/maze-worker.js') 绝对路径兜底。
三、生成后路径数据直接用于 A* 求解或 Canvas 渲染，不二次加工
Worker 输出的 `grid` 是轻量级二维数组，可直接传给前端路径搜索（如 A*）或 canvas 绘制函数。无需在主线程再“解析”或“转换格式”。- 若需高亮最短路径，让主线程调用 A*（它本身很快，不卡 UI）；
- 若需动画展示生成过程，不要在 Worker 里发大量中间帧（postMessage 开销大），改为主线程请求“每 N 步发一次快照”，或 Worker 内部用
setTimeout分片生成（不推荐，复杂且不准）； - 真正的大规模（如 500×500），建议 Worker 返回压缩后的行数据（如每行用字符串
'01001'表示），减少序列化体积。
关键提醒：Worker 中无法使用 `canvas`、`localStorage`、`fetch`（除非用 `window.fetch` 不可行，得用 `self.fetch` 且需同源）、`console`（可用但输出在 DevTools 的 Worker 标签页）。一切以纯计算和 `postMessage` 为边界。
