We rewrote our custom visualisation renderers from SVG to be in Canvas
11 hours ago
- #Data Visualization
- #Web Development
- #Performance Optimization
- 新的分析器仪表板使用Canvas替代SVG来渲染火焰图，消除了每帧所需的DOM节点，减轻了浏览器的工作负担。
- Canvas采用即时模式API，绘图命令直接生成像素，避免了SVG保持模式相关的样式、布局及垃圾回收开销。
- 数据通过Arrow Flight的列式Arrow格式处理，支持零拷贝读取和高效渲染，通过直接访问数组来获取帧属性，如x位置、宽度和深度。
- 渲染优化包括视窗裁剪以仅绘制可见帧和预计算位置，使缩放、滚动和重置交互操作感觉即时。
- 性能改进显示Canvas渲染器在独立测试中速度提升约3.6倍，缩放和滚动等实时交互速度加快4-5倍，但可访问性和文本选择方面仍有待权衡。