3、前端渲染引擎选型：Canvas vs SVG vs WebGL 的取舍

做数据可视化大屏，第一个要拍板的问题就是：用哪个渲染引擎？

Canvas、SVG、WebGL，三选一。选对了，事半功倍。选错了，后面全是坑。

我见过不少团队，一上来就上 WebGL，觉得高大上。结果数据量才几百条，性能瓶颈根本不在渲染层，反而把开发周期拖长了一倍。说白了，杀鸡用了牛刀。

反过来，也有项目硬扛 SVG，节点一多直接卡成 PPT。嗯，这种场面我也经历过。

3.1 三者的核心差异

先看一张对比表，心里有个底：

特性	Canvas (2D)	SVG	WebGL
渲染方式	像素级位图	矢量图形	GPU 加速光栅化
DOM 节点	无（单个 canvas 元素）	每个图形都是 DOM 节点	无（单个 canvas 元素）
交互能力	弱（需手动计算点击区域）	强（原生事件绑定）	弱（需手动实现拾取）
大数据量	优秀（万级节点流畅）	较差（千级节点开始卡顿）	极强（十万级节点无压力）
动画性能	良好（逐帧重绘）	一般（CSS 动画或 JS 操作 DOM）	极强（GPU 并行计算）
开发复杂度	中等	低	高
适用场景	图表、游戏、图像处理	图标、小数据量图表、UI 元素	3D 场景、海量数据、复杂特效

这张表我建议你收藏。每次选型前拿出来对照一下，能省不少事。

3.2 什么时候选 Canvas？

我个人习惯，当数据量在几千到几万之间，而且不需要频繁的单个元素交互时，首选 Canvas。

举个例子，一个折线图，数据点 5000 个。用 SVG 的话，DOM 节点数直接爆炸，浏览器重排重绘能把你拖死。但 Canvas 就轻松很多，它只管画像素，不管 DOM。

我在项目中遇到过一个大屏，展示全国实时物流轨迹。地图上同时有 3000 多个飞线动画。一开始用的 SVG，结果浏览器直接崩溃。后来换成 Canvas，帧率稳定在 50fps 以上。嗯，选对工具的感觉真好。

3.3 什么时候选 SVG？

SVG 最大的优势是什么？每个图形都是 DOM 节点。

这意味着你可以直接用 CSS 控制样式，用 JS 绑定事件。开发体验非常友好。

你想想看，做一个可交互的流程图，每个节点都要 hover 高亮、点击弹出详情。用 SVG 的话，几行代码就搞定了。用 Canvas？你得自己算坐标、维护点击区域、手动重绘……累不累？

我曾经做过一个数据大屏的左侧导航，里面是 20 多个可交互的图标。用 SVG 实现，每个图标独立绑定事件，配合 CSS 动画，效果非常丝滑。如果用 Canvas，反而小题大做了。

3.4 什么时候选 WebGL？

WebGL 是真正的性能怪兽。它直接调用 GPU 进行并行计算，十万级节点轻松驾驭。

但代价也很明显：开发复杂度直线上升。你需要写着色器程序，管理缓冲区，处理矩阵变换……说白了，这是给 3D 游戏和高端可视化准备的。

我记得有一次，客户要求做一个城市级的三维热力图。数据量 8 万个点，还要实时旋转缩放。Canvas 扛不住，帧率掉到 10fps 以下。最后上了 WebGL，配合 LOD（层次细节）技术，帧率稳定在 60fps。这种场景，非 WebGL 不可。

3.5 我的选型决策流程

说了这么多，到底怎么选？我总结了一个简单的决策树：

1. 先看数据量： 小于 500 个元素？→ 考虑 SVG。大于 500？→ 考虑 Canvas 或 WebGL。
2. 再看交互复杂度： 需要每个元素独立交互？→ SVG 优先。整体交互为主？→ Canvas 优先。
3. 最后看性能要求： 数据量超过 1 万，或者需要 3D 效果？→ WebGL。否则 Canvas 足够。

3.6 一个真实的踩坑案例

我曾经接手过一个项目，前任工程师用 SVG 渲染了一个包含 8000 个节点的关系图。页面加载需要 10 秒，滚动时卡顿严重。

我接手后，把渲染引擎换成了 Canvas，配合四叉树空间索引优化。加载时间降到 2 秒，交互流畅度大幅提升。

这个案例告诉我：选型失误的代价，可能比你想的更大。一开始多花点时间做技术选型，后面能省下几倍的返工时间。

好了，这一章就到这里。下一章我会讲「数据加载与分页策略」，这是大屏性能优化的另一个关键点。到时候见。