Canvas性能优化小记

Canvas渲染动画每秒高达60帧，就是每一帧图像的绘制时间是（1000ms/60），如果每帧渲染时间超过16ms则会感受到卡顿。

影响canvas渲染性能的有以下几点：

1. 绘制图像的数量和大小
2. 图形数量过多，只是刷新部分可以使用局部渲染，或者分层渲染
3. 某些逻辑影响主线程的可以使用离屏渲染和webworker来解决
4. 将渲染阶段的开销转嫁到计算阶段之上，计算用的是cpu资源，渲染使用GPU资源，cpu更擅长执行计算任务
5. 使用多个分层的 Canvas 绘制复杂场景
6. 不要频繁设置绘图上下文的 font 属性
7. 不在动画中使用 putImageData 方法
8. 将固定的内容预先绘制在离屏 Canvas 上以提高性能
9. canvas绘制的坐标尽量取整，浮点坐标会导致canvas进行抗锯齿处理
   10.尽量减少canvas状态机的更新