Google Docs发表将会把HTML迁徙到基于Canvas渲染，这一音讯的呈现再次把几年前随HTML5诞生的标签从新推到了人们眼帘之中。Canvas在刚推出时主打的劣势就是更快的渲染速度，堪称HTML届的“苏炳添”，刷新了人们对Web页面元素绘制速度的印象。但Canvas的劣势仅限于此吗？

（苏炳添，亚洲百米第一人）

HTML绘图届的前辈：SVG

Canvas是HTML5时代引入的“新”标签。与很多标签不同，Canvas不具备本人的行为，只将一组API 展示给客户端 JavaScript ，让开发者应用脚本把想绘制的货色画到一张画布上。

在HTML5之前，人们通常应用SVG来在页面上绘制出图形。SVG应用XML来定义图形，就像应用HTML标签和款式定义DIV一样，咱们也能够将一个空白的DIV设想为长方形的SVG，两者的设计思维是相通的，SVG的实质就是一个DOM元素。而Canvas则不同，Canvas提供的是 JavaScript 的绘图 API，而不是像 SVG那样应用XML 形容绘图，通过JavaScript API间接实现绘制，比起批改XML来说要更简便、更间接。

除了定义的形式不同，Canvas和DOM（当然也蕴含SVG）的差别更多的体现在浏览器的渲染形式上。

浏览器在做页面渲染时，Dom元素是作为矢量图进行渲染的。每一个元素的边距都须要独自解决，浏览器须要将它们全都解决成像素能力输入到屏幕上，计算量非常宏大。当页面上内容十分多，存在大量DOM元素的时候，这些内容的渲染速度就会变得很慢。

（Canvas）

而Canvas与DOM的区别则是Canvas的实质就是一张位图，相似img标签，或者一个div加了一张背景图（background-image）。所以，DOM那种矢量图在渲染中存在的问题换到Canvas身上就齐全不同了。在渲染Canvas时，浏览器只须要在JavaScript引擎中执行绘制逻辑，在内存中构建出画布，而后遍历整个画布里所有像素点的色彩，间接输入到屏幕就能够了。不论Canvas外面的元素有多少个，浏览器在渲染阶段也仅须要解决一张画布。

然而这样更加弱小的性能，不可避免的让应用canvas渲染有很高的门槛。Google Docs在构建Canvas的过程中从新定义了平常曾经被人们所相熟的内容，例如精确定位、文本抉择、拼写查看、重画调优等。为什么更多开发者还是抉择了接收Canvas这个门槛更高的技术路线呢？这就得回到Canvas的最大劣势：渲染性能。

Canvas的渲染模式

这里的渲染是指浏览器将页面的代码出现为屏幕上内容的过程。Canvas和Dom的渲染模式齐全不同，搞清楚这个差别对了解Canvas的性能劣势至关重要。

Dom：驻留模式

驻留模式（Retained Mode）是Dom在浏览器中的渲染模式。下图粗略展现了这一过程的工作流程。

(驻留模式)

DOM的外围是标签，一种文本标记型语言，多样性很强且多个标签之间存在各种关联（如在同一个DIV下设置为float的子DIV）。浏览器为了更好的解决这些DOM元素，缩小对绘制API的调用，就设计了一套将两头后果寄存于内存的“驻留模式”。首先，浏览器会将解析DOM相干的全部内容（蕴含HTML标签、款式和JavaScript），将其转化为场景（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万行x 20列）甚至上亿个，浏览器须要对表格所有单元格自身内容进行渲染，同时还波及到丰盛的数据处理，状况就齐全不同了。

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

在Canvas呈现之前，在前端渲染表格时只能通过构建简单的DOM来实现。这种形式下，浏览器的性能成为了Web利用瓶颈，让很多开发者放弃了在浏览器上实现电子表格的想法。

在Canvas呈现后，疾速模式带来的性能劣势无疑是一个微小的亮点，大量、简单的DOM渲染解决带来的性能问题终于有了解决路径。

回到电子表格的利用场景，业内曾经呈现了应用Canvas绘制画布的表格组件，这类组件在渲染数据层时不仅无需反复创立和销毁DOM元素，在画布的绘制过程中，也比Dom元素渲染的限度更少。除了表格之外，Canvas也为数字孪生可视化大屏、页面游戏等场景带来了改革。

（数字孪生大屏，准确管制各种形态、款式）

总结

总结一下，在渲染模式上，Canvas站在了DOM的对面，浏览器对其内容无所不知，所有渲染的权力回到了开发者的手上，这个扭转带来了显著的性能劣势。此外，咱们能够应用Canvas绘制品种更为丰盛的UI元素，如线形、非凡图形等，通过画法逻辑，还能够实现更加精准的UI界面渲染，解决了浏览器差别造成的款式误差，让更多利用场景能够顺利迁徙到Web平台上来。

参考资料：

·       Canvas的Wiki介绍

·       Canvas社区

·       基于Canvas表格组件 SpreadJS

转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。