图形引擎 · 渲染管线

Canvas 渲染管线
与图形引擎

基于 ZRender 封装数据驱动的 Canvas 图形库，解决 海量节点与 复杂交互场景下的性能瓶颈。从渲染管线拆解到工程化实践，深入每一层抽象。

100K+
节点支持
< 16ms
帧耗时
5 层
管线分层
6 模块
核心引擎
管线架构

渲染管线 · 五层流水线

数据从进入引擎到最终像素上屏，经过五个清晰解耦的处理阶段

Stage 1DATA

数据解析层

将 JSON Schema / DSL 转换为内部渲染树 (Display List)，支持增量 Diff 更新

Virtual DOM → Display List 映射
增量 Diff & 批量 Patch
JSON Schema 驱动声明式绑定
Stage 2LAYOUT

布局计算层

自动计算节点位置、大小与层级关系，支持 Force / Dagre / Grid 等布局算法

Stage 3SCENE

场景图管理层

维护树形场景图，处理裁剪、变换矩阵级联、脏区标记与剔除

Stage 4RENDER

Canvas 绘制层

分层 Canvas (Background / Main / Overlay) 并行绘制，脏区局部刷新

Stage 5EVENT

交互事件层

基于拾取 (Picking) 机制的精准事件分发，支持手势识别与拖拽约束

性能基准

量级碾压 · 性能对比

通过管线优化，在相同硬件条件下实现数量级的性能提升

节点渲染
10 万节点全量渲染
67× 提升
原始方案12,000 ms
优化方案180 ms
交互响应
拖拽 5000 节点帧耗时
43× 提升
原始方案340 ms
优化方案8 ms
内存占用
百万级边的图数据
6× 提升
原始方案2,048 MB
优化方案320 MB
首次渲染
复杂 DAG 拓扑图
19× 提升
原始方案8,500 ms
优化方案450 ms
引擎架构

六大核心模块

模块化设计，每个组件独立可测试、可替换，通过事件总线松耦合

ShapeRegistry

图形注册中心

统一管理内置 & 自定义图形类型，运行时动态扩展

RenderScheduler

渲染调度器

requestAnimationFrame 驱动的帧调度，合并批量更新

SpatialIndex

空间索引引擎

R-Tree + BVH 双重索引，O(log n) 范围查询与碰撞检测

EventHandler

事件分发引擎

像素拾取 + 事件委托，支持自定义手势与拖拽约束

LayerManager

分层管理器

Background / Main / Overlay 三层 Canvas 独立刷新

TransformStack

变换矩阵栈

矩阵级联、脏标记传播，最小化重计算范围

模块间通过 EventBus 松耦合通信，支持运行时热插拔
核心技法

引擎优化三板斧

对象池、增量渲染、分层 Canvas —— 解决性能问题的三大核心策略

const pool = new ShapePool({
  initialSize: 10000,
  growthFactor: 1.5,
  shapeType: 'circle'
});

// 从池中获取 → 使用 → 归还
const node = pool.acquire();
node.setAttr({ x, y, r: 8 });
// ... render ...
pool.release(node);
交互实验场

实时渲染沙盒

调节节点数量与空间裁剪开关，亲身体验优化前后的帧率差异

2,000
0 FPS

空间裁剪

视锥外的节点直接跳过绘制，FPS 立竿见影

批量绘制

相同样式的节点合并 Path 一次 stroke/fill

脏区重绘

仅重绘发生变化的矩形区域，减少像素写入

总结

数据驱动 · 声明式渲染

一套完整的从数据到像素的映射关系

Data → Render Pipeline Flow
JSON Schema
Parser
Display List
Layout
Scene Graph
Culling
Canvas Draw
Pixels
核心理念：上层业务只需要描述 "数据长什么样"，无需关心 "怎么画"。 引擎负责将声明式数据自动映射为高效的 Canvas 绘制命令， 并通过空间索引与脏区机制最小化每帧的计算与绘制开销。 这就是 数据驱动 Canvas 的本质。