可视化渲染性能：canvas、svg、webgl浏览器 DOM 来渲染，元素个数越多，消耗就越大。利用 GPU 的并行

指令式绘图系统
影响渲染性能的主要因素
- 绘制图形的数量
- 绘制图形的大小 | 图形个数 | 帧率 | | ---- | ---- | | <= 500 | 60fps | | 1000 | 50fps | | 3000 | 24fps（比较流畅动画效果最低帧率）|
优化
- 优化canvas 指令
  - 根据顶点来绘制图形，顶点多，绘制指令也会多，可以通过减少顶点（切换图形方法）来优化指令
- 使用缓存
  - 离屏canvas：offscreen canvas，绘制时将绘图指令直接通过drawImage 来绘制，也不需要fill() 方法来填充图形
  - 局限性：
    - 绘制图形状态非常多的话，需要创建大量的离屏canvas，内存消耗大，反而降低性能
    - 适用于图形状态本身不变的图形元素，若经常发生改变，缓存就要一直更新，缓存更新本身也是绘图过程，并不能减少绘制指令，反而会因为增加 drawImage 指令而产生更大开销
    - 通过缓存 drawImage 绘制的是位图，直接绘制的是矢量图，所以缓存绘制图形清晰度不是太好（fillText 渲染文字/绘制图形有较大缩放scale）
- 分层渲染（多个canvas）
  - 局限性
    - 大量静态图形不需要重新绘制
    - 动态和静态元素绘制顺序是固定的
- 局部重绘
  - canvas content clearReact 控制刷新动态区域
- 优化滤镜
- 多线程渲染

浏览器 DOM 来渲染，元素个数越多，消耗就越大。
影响渲染性能的主要因素
- 绘制图形的数量（数量增多，svg帧率下降更明显）
- 绘制图形的大小 | 图形个数 | 帧率 | | ---- | ---- | | <= 500 | 60fps | | 3000 | 15fps |