[可视化]Canvas性能优化

在极客时间上，听了课程《跟月影学可视化》，受益匪浅。这里记录一下Canvas性能优化的常见手段。

优化Canvas指令

Canvas执行的绘图指令越多，性能消耗就越大。尽可能的减少绘图指令，能够达到更好的性能。

例如，用在关系图谱中，用圆来代替多边形，就能够有效的降低计算开销。尤其是在节点很小的时候，其实多边形和圆的外观没多少差别，但计算开销相差很大。

使用缓存

可以提前将图形保存到离屏Canvas中，在需要展示的时候，用drawImage指令将图形当做图像来渲染，能够大大提高效率。

如果需要缓存的图形状态特别多，每个状态都对应一个离屏Canvas对象，那么这个方法对内存的消耗会比较大。所以缓存方法不适合状态经常发生变化的情景。

分层渲染

如果绘制的元素大部分都不变，只有少部分在变化，那么就可以将变化的元素和不变的元素进行分层处理。
一层Canvas负责绘制背景，另一层Canvas负责绘制变化的部分。这样大大减少了图形绘制的数量。

局部重绘

有些可视化场景中，只有屏幕的部分区域需要动态绘制。这时候可以利用clearRect方法控制要刷新的区域，只对这些区域进行擦除重绘。

多线程渲染

可以利用WebWorker，充分利用多核CPU计算资源。Canvas对象通过transferControlToOffscreen转成离屏Canvas对象，发送给Woker线程去进一步处理。