[cache和buffer的区别]canvas的缓冲绘图

canvas的缓冲绘图涉及到两个概念，一是“双缓冲”，二是"预渲染"。

双缓冲历史已久。记得当年学习windows编程时就用到了双缓冲技术，先在内存中开辟一块画布，在上面执行完绘制操作后，把该内存画布作为一幅图片整体投射到屏幕上。这样可以避免显示器闪烁。

而预渲染则是把图画中常用到的一些背景部分预先画到一个缓冲画布上，当动画中需要显示该部分时，直接从缓冲上拷过来用就行了。

"双缓冲"和"预渲染"是两个不同的技术。需要注意的是：在html5 canvas编程中，已不需要双缓冲了。因为浏览器已经在底层做了相应优化。不同于我前面提到的win32编程，代码是可以直接控制物理设备的，所以必需使用双缓冲。关于这点，可参考文章：https://www.iteye.com/blog/fins-622493文章后面作者一句话非常精髓：“你说的这种和我说的双缓冲不是一个意思.  你这个相当于 cache , 而不是 buffer.” 这也反映出这两个概念容易搞混。

明确一下："双缓冲"就buffer，"预渲染"是cache。关于cache和buffer的概念定义可参考：Cache 和 Buffer 都是缓存，主要区别是什么？【转】 - 云+社区 - 腾讯云

我自己总结cache和buffer：  

cache和buffer都是存贮器，它们的工作过程是："(数据)源"->"存贮(cache/buffer)"->"目标(设备)"

不同之处是：
1 cache是为"源"服务的，而buffer是为"目标"服务的。
2 cache强调速度，而buffer重在兼容目标的吞吐量。
3 cache需要算法支持/优化，而buffer是纯物理设备。

 下面这两篇文章较为明确和清晰的讲述了canvas缓冲式绘图：

谈谈canvas的性能优化（主要讲缓存问题）_cysear的专栏-CSDN博客_canvas 内存

提高HTML5 canvas性能的几种方法！_刀刀的专栏-CSDN博客_canvas性能优化

以上是我个人的总结。我建议今后我们要看场合使用"缓冲" 这一词，必要时用"buffer"或"cache"以明确用法。