html5的本地缓存优化,浅谈利用缓存来优化HTML5 Canvas程序的性能

canvas玩多了后，就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢？

【使用缓存】

使用缓存也就是用离屏canvas进行预渲染了，原理很简单，就是先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。可能看到这很多人就会误解，这不是写游戏里面用的很多的双缓冲机制么？

其实不然，双缓冲机制是游戏编程中为了防止画面闪烁，因此会有一个显示在用户面前的画布以及一个后台画布，进行绘制时会先将画面内容绘制到后台画布中，再将后台画布里的数据绘制到前台画布中。这就是双缓冲，但是canvas中是没有双缓冲的，因为现代浏览器基本上都是内置了双缓冲机制。所以，使用离屏canvas并不是双缓冲，而是把离屏canvas当成一个缓存区。把需要重复绘制的画面数据进行缓存起来，减少调用canvas的API的消耗。

众所周知，调用canvas的API很消耗性能，所以，当我们要绘制一些重复的画面数据时，妥善利用离屏canvas对性能方面有很大的提升，可以看下下面的DEMO

1 、 没使用缓存

2、  使用了缓存但是没有设置离屏canvas的宽高

3 、 使用了缓存但是没有设置离屏canvas的宽高

4 、 使用了缓存且设置了离屏canvas的宽高

可以看到上面的DEMO的性能不一样，下面分析一下原因：为了实现每个圈的样式，所以绘制圈圈时我用了循环绘制，如果没用启用缓存，当页面的圈圈数量达到一定时，动画每一帧就要大量调用canvas的API，要进行大量的计算，这样再好的浏览器也会被拖垮啦。

XML/HTML Code复制内容到剪贴板

ctx.save();

var j=0;

ctx.lineWidth = borderWidth;

for(var i=1;i

ctx.beginPath();

ctx.strokeStyle = this.color[j];

ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);