浏览器四种可视化方案html/css、svg、canvas、webgl比较

用CSS实现柱状图其实很简单，原理就是使用网格布局（Grid Layout）加上线性渐变，缺点不能用数据直接对应，需要换算转化。

SVG元素和HTML元素一样，在输出图形前都需要经过引擎的解析、布局计算和渲染树生成。
无论是使用HTML/CSS还是SVG，它们都属于声明式绘图。

Canvas2D不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。
Canvas能够直接操作绘图上下文，不需要经过HTML、CSS解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas比HTML/CSS和SVG要快得多。
Canvas并没有区分“A柱子”、“B柱子”，这让我们很难单独对Canvas绘图的局部进行控制。
举个例子，我们可以先使用SVG生成某些图形，然后用Canvas来渲染。这样，我们就既可以享受SVG的便利性，又可以享受Canvas的高性能了。

WebGL不基于canvas，绘制比前三种方式要复杂一些，因为WebGL是基于OpenGL ES规范的浏览器实现的，API相对更底层，使用起来不如前三种那么简单直接。
如果我们要绘制的图形数量非常多，比如有多达数万个几何图形需要绘制，而且它们的位置和方向都在不停地变化，那我们即使用Canvas2D绘制了，性能还是会达到瓶颈。这个时候，我们就需要使用GPU能力，直接用WebGL来绘制。

1、HTML+CSS 的优点是方便，不需要第三方依赖，甚至不需要 JavaScript 代码。如果我们要绘制少量常见的图表，可以直接采用 HTML 和 CSS。它的缺点是 CSS 属性不能直观体现数据，绘制起来也相对麻烦，图形复杂会导致 HTML 元素多，而消耗性能。

2、SVG 是对 HTML/CSS 的增强，弥补了 HTML 绘制不规则图形的能力。它通过属性设置图形，可以直观地体现数据，使用起来非常方便。但是 SVG 也有和 HTML/CSS 同样的问题，图形复杂时需要的 SVG 元素太多，也非常消耗性能。

3、Canvas2D 是浏览器提供的简便快捷的指令式图形系统，它通过一些简单的指令就能快速绘制出复杂的图形。由于它直接操作绘图上下文，因此没有 HTML/CSS 和 SVG 绘图因为元素多导致消耗性能的问题，性能要比前两者快得多。但是如果要绘制的图形太多，或者处理大量的像素计算时，Canvas2D 依然会遇到性能瓶颈。

4、WebGL 是浏览器提供的功能强大的绘图系统，它使用比较复杂，但是功能强大，能够充分利用 GPU 并行计算的能力，来快速、精准地操作图像的像素，在同一时间完成数十万或数百万次计算。另外，它还内置了对 3D 物体的投影、深度检测等处理，这让它更适合绘制 3D 场景。

来源：https://time.geekbang.org/column/article/252076