现代浏览器是一个复杂的系统，其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式，我总结了一下，大体上有 4 种。
第 1 种是传统的 HTML+CSS。这种方式通常用来呈现普通的 Web 网页。
第 2 种是使用 SVG。SVG 和传统的 HTML+CSS 的绘图方式差别不大。只不过，SVG专门用于绘制矢量图
第 3 种是使用 Canvas2D。这是浏览器提供的 Canvas API 中的其中一种上下文，在可视化中，canvas比较常见。
第 4 种是使用 WebGL。这是浏览器提供的 Canvas API 中的另一种上下文。WebGL 利用了 GPU 并行处理的特性，这让它在处理大量数据展现的时候，性能大大优于前 3 种绘图方式。因此，在可视化的应用中，一些数据量大、视觉效果要求高的特殊场景，使用 WebGL 渲染是一种比较合适的选择。
首先我们来分析一下HTML+CSS实现可视化的弊端。
1利用css来绘制可视化图表，数据和图表之间的数据关系并不明确，这就会导致维护起来很麻烦
2HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制图形外，还要做很多额外的工作。比如说，浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML（或 SVG）绘图。当图形发生变化时，我们很可能要重新执行全部的工作，这样的性能开销是非常大的
svg其实也有缺点。在渲染引擎中，SVG 元素和 HTML 元素一样，在输出图形前都需要经过引擎的解析、布局计算和渲染树生成。而且，一个 SVG 元素只表示一种基本图形，如果展示的数据很复杂，生成图形的 SVG 元素就会很多。这样一来，大量的 SVG 元素不仅会占用很多内存空间，还会增加引擎、布局计算和渲染树生成的开销，降低性能，减慢渲染速度。这也就注定了 SVG 只适合应用于元素较少的简单可视化场景。
对于后两种方式，则是我们实现可视化常用的方法。当我们面对可视化的需求时，就可以更好的做出相关的选择。
此文章为6月Day07学习笔记，内容来源于极客时间《跟月影学可视化》，强烈推荐该课程！
