一、Html+Css

这种方式通常用来展示传统的web网页

• 优点：

  1.一些简单的可视化图表，用 CSS来实现很有好处，既能简化开发，又不需要引入额外的 库，可以节省资源，提高网页打开的速度。

• 缺点：

  1.绘制的方式不简洁，很难看出数据与图形的对应关系，换多计算需要开发人员自己来做，一旦数据或图表发生变动就需要重新计算，维护起来很麻烦。

  2.HTML 和 CSS 作为浏览器渲染引擎的一部分，当图形发生变化时，需要重新渲染，性能开销非常大。

• 结论：

  1.相比于 HTML 和 CSS，Canvas2D 和 WebGL 更适合去做可视化这一领域的绘图工 作。它们的绘图 API 能够直接操作绘图上下文，一般不涉及引擎的其他部分，在重绘图像 时，也不会发生重新解析文档和构建结构的过程，开销要小很多。

二、SVG

SVG 和传统的 HTML+CSS 的绘图方式差别不大。只不过，HTML 元素在绘制矢量图形方面的能力有些不足，而 SVG 恰好弥补了这方面 的缺陷。

• 优点：

  1.svg让绘制不规则图形变得更简单

  2.在渲染引擎中，SVG 元素和 HTML 元素一样，在输出图形前 都需要经过引擎的解析、布局计算和渲染树生成，而且，一个 SVG 元素只表示一种基本图 形，如果展示的数据很复杂，生成图形的 SVG 元素就会很多。这样一来，大量的 SVG 元 素不仅会占用很多内存空间，还会增加引擎、布局计算和渲染树生成的开销，降低性能，减 慢渲染速度。

三、 Canvas2D

这是浏览器提供的 Canvas API 中的其中一种上下文，使用它 可以非常方便地绘制出基础的几何图形。在可视化中，Canvas 比较常用。

四、WebGL

这是浏览器提供的 Canvas API 中的另一种上下文，它是 OpenGL ES 规范在 Web 端的实现。我们可以通过它，用 GPU 渲染各种复杂的 2D 和 3D 图形。值得一提的是，WebGL 利用了 GPU 并行处理的特性，这让它在处理大量数据展现 的时候，性能大大优于前 3 种绘图方式。因此，在可视化的应用中，一些数据量大、视觉 效果要求高的特殊场景，使用 WebGL 渲染是一种比较合适的选择。