可视化绘图的性能优化

这是听了2022 See Conf后做的记录，供后续参考。

蚂蚁：沧东
draw call性能优化

1、剔除：包围盒与视口求交
1.1 通过场景图(父子关系)减少求交次数
1.2 空间索引，STLT算法；将靠得比较近的图形，合并为一个图形，减少求交次数
2、脏矩形渲染
类似react的diff算法，找出真正变化的内容，比如高亮
Canvas2D API： clearRect

3、合批绘制
//Canvas2D
ctx.arc() * 8000

//webgl
gl.drawElementsInstanced() * 1

4、GPU并行计算
比如页面平移
// CPU
for (0:8000)
xxx.transform…

// GPU 并行(Shader)
vec4 position = u_ProjectionMatrix * u_ViewModelMatrix;