HTML-Canvas的优越性能以及实际应用

HTML绘图届的前辈：SVG

说起HTML5时代带来的新标签，Canvas绝对算一个。它不像大多数标签那样自带行为，而是把一组绘图API直接交给Ja vaScript，让开发者自己决定往画布上画什么。

在Canvas出现之前，网页上要画点图形，基本靠SVG——用XML来描述图形，和用HTML标签加样式来定义DIV是一个思路。本质上，SVG也是个DOM元素。但Canvas就不一样了，它直接提供Ja vaScript绘图API，比起操作XML，明显更直接也更灵活。

当然，定义方式的不同只是表面。Canvas和DOM（包括SVG）真正的差异，体现在浏览器的渲染方式上。

浏览器渲染页面时，DOM元素是按矢量图来处理的。每个元素的边距、位置都得单独计算，最后再全部转换成像素输出到屏幕。可以想象，当页面上的DOM元素多起来，这种计算量会变得相当庞大，渲染速度自然就慢下来了。

（Canvas）

Canvas则完全不同，它本质上就是一张位图，和img标签或者一个加了背景图的div差不多。所以，DOM那种矢量图渲染的瓶颈，在Canvas身上根本不存在。渲染Canvas时，浏览器只需要在Ja vaScript引擎里执行绘制逻辑，在内存中构建好画布，然后遍历所有像素点的颜色，直接输出到屏幕就完事了。不管Canvas里有多少个元素，对浏览器来说，它需要处理的始终只是一张画布。

不过，功能越强大，门槛往往也越高。比如Google Docs在构建Canvas时，就不得不重新定义精确定位、文本选择、拼写检查、重画调优这些以往在DOM中已经成熟的东西。那为什么还有这么多开发者愿意接受Canvas这个技术路线？答案只有一个：渲染性能。

Canvas的渲染模式

这里的渲染，指的是浏览器把代码变成屏幕上内容的过程。Canvas和DOM的渲染模式完全不同，搞懂这个差异，才能真正理解Canvas的性能优势从何而来。

Dom：驻留模式

DOM在浏览器中的渲染模式叫驻留模式（Retained Mode）。下图大概展示了它的工作流程。

(驻留模式)

DOM的核心是标签，一种文本标记型语言，多样性很强，而且标签之间还存在着各种关联——比如同一个DIV下设置了float的子DIV。为了更高效地处理这些元素，减少对绘制API的调用，浏览器设计了一套“驻留模式”，把中间结果存到内存里。具体来说，浏览器会先解析所有跟DOM相关的内容（HTML标签、样式、Ja vaScript），把它们转化成场景（scene）和模型（model）存起来，然后再调用系统的绘制API（比如Windows上的GDI/GDI+），把这些中间产物绘制到屏幕上。

驻留模式通过场景和模型缓存，减少了绘制API的调用次数，但代价是把性能压力转移到了场景和模型生成阶段——浏览器需要根据DOM上下文和BOM中的尺寸数据，“自行判断”每个元素的绘制结果。

Canvas：快速模式

Canvas采用的是和DOM相反的快速模式（Immediate Mode）。来看看它是怎么工作的：

（快速模式）

Canvas的应用优点

两种不同的渲染模式，直接导致了DOM和Canvas在性能上的差异。对于使用快速模式的Canvas来说，浏览器的每次重绘都基于代码，没有多层解析的拖累，所以它真的很快。除了快，Canvas的灵活性也远超DOM——通过代码，我们可以精确控制何时、如何绘制出想要的效果。

在资源消耗上，DOM的驻留模式意味着场景里每增加一点东西，就要额外消耗一些内存，而Canvas没有这个问题。这个差异会随着页面元素数量的增多变得越来越明显。以B端的企业应用为例，像表单这种数据量小的场景，两种模式带来的差异并不明显；但在工业制造、金融财会这类需要操作类Excel电子表格的场景下，单元格数量动辄上百万（5万行×20列）甚至上亿个，浏览器不仅要渲染所有单元格本身的内容，还得处理丰富的数据交互，情况就完全不同了。

（Web页面上的电子表格，包含1百万个单元格）

在Canvas出现之前，前端渲染表格只能靠构建复杂的DOM来实现。这种方式下，浏览器的性能成了Web应用的瓶颈，很多开发者因此放弃了在浏览器上实现电子表格的想法。

Canvas的出现，让快速模式带来的性能优势成了真正的亮点。大量、复杂的DOM渲染问题，终于有了一个可行的解决方案。

回到电子表格这个场景，业内已经出现了使用Canvas绘制的表格组件。这类组件在渲染数据层时，不仅不需要重复创建和销毁DOM元素，在画布绘制过程中，也比DOM元素的渲染限制更少。当然，Canvas带来的变革远不止表格，数字孪生可视化大屏、页面游戏等场景，也都因此焕然一新。

（数字孪生大屏，精确控制各种形状、样式）

总结

总结一下，在渲染模式上，Canvas站在了DOM的对立面。浏览器对Canvas里的内容一无所知，一切渲染的主动权都回到了开发者手里，这个改变带来了显著的性能优势。此外，Canvas还能绘制种类更丰富的UI元素，比如线形、特殊图形等，通过画法逻辑还能实现更精准的UI界面渲染，解决了浏览器差异造成的样式误差，让更多应用场景得以顺利迁移到Web平台上。

参考资料：

· Canvas的Wiki介绍

· Canvas社区