前端技术系列

写博客一年多了，画了大概大几十张图。架构图、时序图、数据对比柱状图、TCP 拥塞窗口变化曲线。

然后有一天下班路上我突然意识到一件事：我每天都在用 Mermaid，但我完全不知道它背后是什么技术在画。

选技术之前，先看全貌。

很多人第一次接触前端可视化，直接就扎进某个框架的文档里，慢慢啃配置，最后做出来一个能跑的图表。但过几个月遇到性能瓶颈，或者需要支持更复杂的交互，才发现当初选的工具根本不合适。

前两篇聊了出图的历史和工具选型，这次落到技术底层：SVG、Canvas、WebGL 这三层渲染技术到底怎么选？

很多人有个误解：SVG 最慢，Canvas 中等，WebGL 最快。就像交通工具的等级递进——自行车、汽车、飞机。但这种直觉是错的。

市面上图表库那么多，Chart.js、ECharts、D3、Highcharts、AntV、Plotly、Recharts、Victory… 选型时第一个要搞清楚的是：它们根本不是互相替代的关系。

2014 年，瑞典开发者 Knut Sveidqvist 遇到了一个糟糕的问题：他精心制作的一张 Visio 流程图文件损坏了，无法打开。在绝望中，他看着女儿正在看迪士尼的《小美人鱼》，突然想到：如果图表也能用文本来描述，像代码一样管理，那该多好。

静态图表传达信息，动态图表传达过程。

很多人一提到动画，就想到"炫技"，但其实 95% 的博客动画需求用 CSS 就能解决。CSS @keyframes + animation 就像一把瑞士军刀——简单、可靠、不需要引入额外库，还能通过 prefers-reduced-motion 尊重用户的无障碍偏好。