Electrolux_blog渲染引擎（Canvas）
Univer 自研 Canvas 2D 渲染管线（非 DOM 表格），以应对大数据量单元格、合并单元格、缩放等场景。
1. 核心结构
| 概念 | 作用 |
|---|---|
| Engine | 渲染引擎入口，管理帧循环 |
| Scene | 场景图根 |
| Layer / Object | 分层：背景、网格、内容、选区、浮层 |
| Viewport | 可见区域裁剪与滚动 |
| Component | 可复用绘制单元（单元格、边框等） |
2. 渲染流程（一帧）
mermaid
flowchart LR
A[数据/样式变更] --> B[标脏区域]
B --> C[布局测量]
C --> D[按 Layer 绘制]
D --> E[提交 Canvas]- 脏矩形：只重绘变更范围。
- 视口裁剪：屏外单元格跳过绘制。
3. 与数据模型关系
渲染层只读 ViewModel / 样式缓存；写入必须经 Command → MUTATION，再触发刷新事件。
4. 性能要点
| 手段 | 说明 |
|---|---|
| 增量重绘 | 避免全表 clearRect |
| 分层 | 滚动时只动内容层 |
| 离屏缓存 | 静态区域缓存到 offscreen canvas |
| 合并单元格 | 单独布局路径，避免重复测高 |
5. 与 UI 插件
菜单、对话框可用常规 DOM；格子区域在 Canvas。注意 z-index 与坐标映射（屏幕坐标 ↔ sheet 坐标）。
6. 总结
渲染引擎解决 「大量单元格如何流畅画」；调试性能先看脏区是否过大、是否误触发全量重绘。