第二个优化是所有的moveTo和lineTo都完成之后再stroke，这样它就是一条线，可以极大地提高画图的效率。这个很重要，刚开始的时候没这么做，导致格子数稍多的时候就画不了了，改成这样之后，绘制的效率提升很多。

我们还可以再做一个优化，就是使用双缓存技术，在画的时候别直接画到屏幕上，而是先在内存的画布里面完成绘制，最后再一次性地Paint绘制到屏幕上，这样也可以提高性能。如下代码所示：

draw(){ var canvasBuffer = document.createElement("canvas"); canvasBuffer.width = this.canvas.width; canvasBuffer.height = this.canvas.height; var ctx = canvasBuffer.getContext("2d"); ctx.translate(0.5, 0.5); for(var i = 0; i < this.cells; i++){ } ctx.stroke(); this.drawBorder(ctx, cellWidth, cellHeight); console.log("draw"); this.canvas.getContext("2d").drawImage(canvasBuffer, 0, 0); }

先动态创建一个canvas节点，获取它的context，在上面画图，画好之后再用原先的canvas的context的drawImage把它画到屏幕上去。

然后就可以写驱动代码了，如下画一个50 * 50的迷宫，并统计一下时间：

const column = 50, row = 50; var canvas = document.getElementById("maze"); var maze = new Maze(column, row, canvas); console.time("generate maze"); maze.generate(); console.timeEnd("generate maze"); console.time("draw maze"); maze.draw(); console.timeEnd("draw maze");

画出的迷宫：

运行时间：

可以看到画一个2500规模的迷宫，draw的时间还是很少的，而生成的时间也不长，但是我们发现一个问题，就是迷宫的有些格子是封闭的：

这些不能够进去的格子就没用了，这不太符合迷宫的特点。所以不能存在自我封闭的格子，由于生成的时候是判断第一个格子有没有和最后一个连通，现在改成第一个格子和所有的格子都是连通的，也就是说可以从第一个格子到达任意一个格子，这样迷宫的误导性才比较强，如下代码所示：

linkedToFirstCell(){ for(var i = 1; i < this.cells; i++){ if(!this.unionSets.sameSet(0, i)) return false; } return true; }

把while的判断也改一下，这样改完之后，生成的迷宫变成了这样：

这样生成的迷宫看起来就正常多了，生成迷宫的时间也相应地变长：

但是我们发现还是有一些比较奇怪的格子布局，如下图所示:

因为这样布局的其实没太大的意义，如果让你手动设计一个迷宫，你肯定也不会设计这样的布局。所以我们的算法还可以再改进，由于上面是随机选取两个相邻格子，可以把它改成随机选取4个相邻的格子，这样生成的迷宫通道就会比较长，像上图这种比较奇芭的情况就会比较少。读者可以亲自动手试验一下。

3. 用最短路径算法找到迷宫的出路

这个模型更为常见的场景是，现在我在A城镇，准备去Z城镇，中间要绕道B、C、D等城镇，并且有多条路线可选，并且知道每个城镇和它连通的城镇以及两两之间距离，现在要求解一条A到Z的最短的路，如下图所示：

在迷宫的模型里面也是类似的，要求解从第一个格子到最后一个格子的最短路径，并且已经知道格子之间的连通情况。不一样的是相邻格子之间的距离是无权的，都为1，所以这个处理起来会更加简单。