canvas 性能优化（优化渲染效率）

•  影响canvas性能因素

• 图形数量：绘制指令的数量

• 图形大小：绘制指令的执行时间

• requestAnimationFrame： 无限动画神器，采用系统时间间隔，保持最佳绘制效率，让各种网页动画效果能够有一个统一的刷新机制

1. 优化canvas 指令：

        以多边形为例，100边形，顶点数量非常多，canvas需要执行的绘制指令也多，可以转换为圆形arc 指令

2. 使用缓存：离屏canvas（offscreen canvas）

图形缓存到 offscreen canvas 中，绘制时把绘制定点指令换成 drawImage 指令来绘制图像

局限性：

• 如果绘制图形状态（形状、颜色）非常多，需要创建大量离屏canvas，对内存消耗很大，反而降低了性能

• 只适用于图形状态本身不变的图形元素，状态经常发生改变的图形，缓存必须一直更新，反而因为增加了一条drawImage而产生了更大开销

• fillText渲染文字、绘制一个图形有较大缩放时，直接绘制的时矢量图，通过缓存drawImage的时位图，清晰度不是很好

3. 分层渲染：将不变元素与变化元素进行分层处理

canvas 变化：擦出上一次绘制内容，绘制新的内容实现状态变化

条件：

• 大量静态图形元素不需要重新绘制
• 动态和静态图形元素的绘制顺序是固定的

4. 局部重绘：clearReact 控制刷新的动态区域，clip 让图形绘制限制在区域内，超出部分浏览器不渲染到canvas

脏区检查：根据动态元素的包围盒，动态计算出需要重绘的范围

5. 优化滤镜：对canvas 应用全局blur滤镜（把所有元素绘制到离屏canvas上，而不是对每个元素应用滤镜，尽量合并相同的滤镜）

6. 多线程渲染：渲染过程过长会阻碍其他操作，如对事件的响应

浏览器支持canvas 在webworker中以单独的线程来渲染：浏览器主线程中创建worker，然后将canvas 通过 transferControlToOffscreen 转换成 离屏canvas对象发送到 worker中处理