Web 前端与可视化的区别

可视化是将数据组织成易于为人所理解和认知的结构，然后用图形的方式形象地呈现出来的理论、方法和技术。

Web 前端主要是以 HTML 来描述结构。以 CSS 来描述表现，以 JavaScript 来描述逻辑行为。

技术栈上的区别：

Web 前端：HTML、CSS、JavaScript
可视化：Canvas、SVG、WebGL、JavaScript

开发内容的区别：

Web 前端：着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多媒体内容
可视化：着重于处理结构化数据，渲染各种相对复杂的图表和图形元素。

可视化领域的工具

可视化领域经过多年的发展，有非常丰富的工具，大致可以分为四类：

图表库
地理库
渲染库
数据驱动框架

图表库

图表库应该是可视化中最常见的东西，比如：柱状图、折线图、饼图等，常见的图表库有：Echarts、Chartist.js、Chart.js、HighCharts 等。

地图库

专业的 GIS 地图库是为了绘制复杂的地图而生的，可以在地图上标注交通路线、建筑模型位置、地理区块轮廓等，常见的地图库有：Cesium.js、deck.gl、Leaflet.js、Mapbox、ArcGIS 等。

渲染库

渲染库可以提供绘制更灵活的图形、图形或者物理模型的能力，事实上很多地图库本身就是基于这些渲染库开发的，常用的渲染库有：Babylon.js、SpriteJS、Three.js 等。

数据驱动框架

数据驱动框架是一种特殊的库，比如：D3.js，它们更专注于处理数据的组织形式，而将数据呈现交给更底层的图形系统（DOM、SVG、Canvas）或通用图形库（SpriteJS、ThreeJS）去完成。

可视化领域图形绘制方法

Web 上绘制图形的方式可以总结为 4 种：

HTML + CSS
SVG
Canvas2D
WebGL

下面分别来说一下这几种方式是如何在 Web 上进行图形绘制的。

HTML + CSS

这是普通网页开发中最传统，也是最常用的图形绘制方式，像常见的柱状图、饼图和折线图等都可以使用这种方式来实现。

柱状图

饼图

折线图

HTML + CSS 这种方式的优点是：一些简单的可视化图表，用 CSS 来实现很有好处，既能简化开发，又不需要引入额外的库，可以节省资源，提高网页打开的速度。

但是其缺点也很明显：

其绘制方式并不简洁，需要使用到网页布局，而且在 CSS 中很难看出数据与图形的对应关系，对于维护来说是比较麻烦的。
HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制图形外，还要做很多额外的工作。比如说，浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML（或 SVG）绘图。当图形发生变化时，我们很可能要重新执行全部的工作，这样的性能开销是非常大的。而对于可视化来说这些复杂的布局是不必要的，白白消耗了这些性能。

SVG

SVG（Scalable Vector Graphics，可缩放矢量图）是一种基于 XML 语法的图像格式，可以用 img 元素的 src 属性加载。

浏览器内嵌 SVG 标签，并且像操作普通的 HTML 元素一样，利用 DOM API 操作 SVG 元素。甚至，CSS 也可以作用于内嵌的 SVG 元素。

示例

SVG 与 HTML + CSS 比最大的优势就是他把不规则图形的绘制变得更简单了。

但是，SVG 图表也有和 HTML + CSS 类似的缺点，那就是解析和渲染树生成的开销比较高，所以在图素比较多的时候 SVG 的渲染就会变得很慢，这也注定了 SVG 只适合元素不是那么多的场景。

Canvas2D

Canvas2D 是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。

Canvas 可以直接在画布上进行图形的绘制，不像 HTML + CSS 和 SVG 那么需要重新进行网页渲染那一整套流程，因此其绘图的性能要比 HTML + CSS 和 SVG 高很多。

不过，Canvas 也有一个缺点就是想要控制其画布上的图素的时候会没有那么方便，需要通过一些数据计算进行定位，才能获取局部图形，并与其进行交互。

另外，SVG 可以画入 Canvas 中，这样就既可以享受 SVG 的便利性，有可以享受 Canvas 的高性能了。

示例1

示例2

WebGL

WebGL（Web Graphic Library），是一种 3D 绘图协议，这种绘图标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D加速渲染，这样 Web 开发人员就可以借助 GPU，在浏览器里更流畅地展示 3D 场景和模型了。WebGL 是由浏览器来支持和实现的。

WebGL 绘制比前三种方式要复杂许多，API 相对更底层，使用起来不如前三种那么简单直接。

一般情况下，Canvas2D 绘制图形的性能已经足够高了，但是在三种情况下我们有必要直接操作更强大的 GPU 来实现绘图：

需要绘制图形数量非常巨大，而且可能还需要不断地动态更新，Canvas2D 的性能已经达到了瓶颈。这个时候，我们就需要使用 GPU 能力，直接用 WebGL 来绘制。
需要绘制的图形对细节处理要求比较高，比如：实现物体的光影、流体效果和一些复杂的像素滤镜有像素点，Canvas2D 的性能已经达到了瓶颈，就需要用 WebGL 来绘制。
绘制 3D 物体。

示例

总结

绘图方式	优点	缺点	适用场景
HTML + CSS	简单、依赖少、加载快	不够直观、不方便开发维护	少量简单图形
SVG	简单、直观、方便	元素多时性能瓶颈比较明显	图形较多且图形较复杂
Canvas2D	高性能动态绘制	直接操作图形元素不方便	图形复杂、像素处理元素众多
WebGL	3D、大批量绘制、可充分利用 GPU、超高性能	使用繁琐、门槛较高	图形复杂、像素处理特别多、3D

关于可视化的一些基础认知