oogle 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与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的JavaScript API定义了画布内所有元素的绘制方式。浏览器只需要简单的执行这些脚本即可，而不需要像渲染DOM一样逐个处理子元素了。

在快速模式中，页面的绘制性能得到了大幅提升。但开发者不仅需要指定什么需要画，还要创建和维护一个模型。此外，开发者还需要管理好当前场景重绘时带来的改变，以及响应用户的点击或输入操作等。

Canvas的应用优点

上面介绍的两种不同的模式直接造成了Dom和Canvas的性能差异。对于使用快速模式渲染的Canvas而言，浏览器的每次重绘都是基于代码的，不存在能让处理流程变慢的多层解析，所以它真的很快。除了快之外，Canvas的灵活性也大大超出DOM。我们可以通过代码精确的控制如何、何时绘制出我们想要的效果。

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

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

在Canvas出现后，快速模式带来的性能优势无疑是一个巨大的亮点，大量、复杂的DOM渲染处理带来的性能问题终于有了解决途径。

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

总结

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

、什么是Canvas

想必学习前端的同学们对Canvas 都不陌生，它是 HTML5 新增的“画布”元素，可以使用JavaScript来绘制图形。

Canvas元素是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 由一个可绘制区域HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该区域，通过一套完整的绘图功能的API生成动态的图形。

二. 引入Canvas的重要性

HTML5 在 2012 年已形成了稳定的版本，在此之前很长一段时间，开发者们绘制图形选择的方案更多是SVG来实现。SVG使用XML来定义图形，就像使用HTML标签一样来控制元素的排布，SVG的本质就是一个DOM元素。当图形内容太过丰富后，性能和内存上就会大打折扣。一旦涉及频繁的图片绘制场景，这个实现对于用户的体验将是毁灭性的。

渲染动画的基本原理，无非是反复地擦除和重绘。为了动画的流畅，留给开发者渲染一帧的时间，只有短短的 16.67ms。在这16.67ms中，我不仅需要处理一些绘制逻辑，计算每个对象的位置、状态，还需要把它们都画出来。如果消耗的时间稍稍多了一些，用户就会感受到“卡顿”。所以，在编写动画时，开发者们无时无刻不担忧着动画的性能，唯恐渲染的耗时过长。

在现代 Web 开发中，开发者们更多的会借助 Canvas 提供的API去绘制上下文，可以自由绘制各种2D和3D图形，创建富有视觉冲击力的游戏场景和角色。Canvas的使用可以使得游戏能够实现流畅的动态效果和用户交互。无论是简单的小游戏还是复杂的游戏引擎，Canvas 都被广泛应用。

下面是做的一个简单的对比试验，可以很明显感受到两者的差距，分别使用SVG和Canvas绘制一个包含着100w个圆形的500*500的图片，根据耗时计算对比，Canvas耗费的时间几乎只有SVG的一半：

三. 计算与渲染

把动画的一帧渲染出来，需要经过以下步骤：

1. 计算：处理网页渲染逻辑，计算每个对象的状态和位置。
2. 渲染：真正把对象绘制出来。

• JavaScript 调用 DOM API（包括 Canvas API）以进行渲染。
• 浏览器（通常是另一个渲染线程）把渲染后的结果呈现在屏幕上的过程。

之前提到过，在动画设计和开发中，每帧只有16.67毫秒的时间用于渲染。这个数值是通过计算每秒60帧得出的平均每帧渲染时间。实际上，并不是所有设备都能够稳定地达到60FPS。因此，为了确保在不同设备上实现一致性的动画效果，最好将每帧的渲染时间控制在10毫秒以内。

大家都知道，通常情况下，渲染的开销远大于计算（相差3~4个量级）。除非使用了一些时间复杂度很高的算法，否则不需要过于深入优化计算环节。Canvas的渲染是在JavaScript引擎中执行绘制逻辑，通过构建画布在内存中，并遍历所有像素点的颜色，最终输出到屏幕上。这种强大的功能可能会增加学习成本，但如今仍然有很多开发者选择和接受Canvas，这要归功于Canvas最大的优势：渲染性能的出色表现。

四. Canvas渲染性能优势

当谈论图形渲染技术时，就不得不提到DOM驻留模式和Canvas快速模式。

DOM驻留模式

DOM驻留模式是一种基于文档对象模型（DOM）的渲染技术。在DOM驻留模式下，页面的布局和样式是由DOM树来掌管的。当页面需要更新时，浏览器会重新计算布局和样式并重新渲染。此模式非常灵活，特别适用于处理动态页面交互和多样化的样式控制。然而，由于需要频繁地重新计算布局和样式，对于复杂的图形渲染任务来说，性能开销相对较高。

Canvas快速模式

Canvas快速模式利用HTML5的Canvas元素进行图形渲染。在这种模式下，开发者可以使用Canvas提供的2D或3D绘图API直接在画布上绘制图形。相比于DOM驻留模式，Canvas快速模式更加高效。它不关心页面的布局和样式，而是在需要时只重绘受影响的部分。这样就避免了频繁的布局和样式计算，提高了渲染性能。

分层提高Canvas性能

开发者们通过分析大量实际场景，总结出一套可以进一步提升Canvas性能的策略，即对变化较少和变化较多的内容进行分开渲染。这种策略就是所谓的分层Canvas。它能够显著降低完全没有必要的渲染性能开销。分层渲染的思想被广泛应用于各种图形相关的领域，从古老的皮影戏、套色印刷术，到现代电影/游戏工业以及虚拟现实领域等等。而分层Canvas只是分层渲染思想在Canvas动画上的一个基础应用。

分层Canvas的核心理念是，动态页面中的每种元素（层）对于渲染频率的需求是不同的。对于许多金融会计等大数据行业的从业者来说，主要数据内容的变化频率和幅度较大（他们通常面临数据变动和频繁计算），而背景表格样式的变化频率或幅度相对较小（基本不变，或者变化缓慢，或者仅在特定时机变化）。因此，需要频繁更新和重绘数据，但对于背景，可能只需要绘制一次，或者每隔200毫秒才重绘一次，而没有必要每16毫秒就重绘一次。

视野之外的绘制

在许多情况下，Canvas 仅仅作为数据展示页面的一部分，充当着一个“窗口”的角色。如果在每次数据更新时，都将所有数据完全绘制到 Canvas 上，很可能会出现大量内容绘制到Canvas 范围之外的情况。虽然调用了绘制 API，但实际上并没有产生任何效果。

因此，判断对象是否位于 Canvas 范围内需要进行额外的计算（例如，需要通过对游戏角色的全局模型矩阵求逆来得出对象的世界坐标，这是一项相对耗时的操作），同时也会增加代码的复杂性。因此，关键是是否需要这样做。

通过在本地代码中进行测试，比较了在视野内和视野外分别绘制100万个圆的耗时。在视野内绘制耗时8936ms，而在视野外绘制耗时2540ms。考虑到计算和绘制之间的耗时差距在3~4个数量级，因此通过计算来判断并避免绘制视野外的内容是一种非常有效的方法。

五. Canvas的应用

之前探讨了SVG和Canvas的绘制性能差异以及Canvas常见的优化方法。知道，对于使用快速模式渲染的Canvas来说，浏览器的每次重绘都是由代码驱动的，无须进行多层解析，因此它的速度非常快。除了速度快之外，Canvas的灵活性也显著优于DOM。可以通过代码精确控制何时以及如何绘制出期望的效果。

在资源消耗方面，DOM的驻留模式意味着场景中的每一个新增元素都会导致额外的内存消耗，而Canvas则没有这个问题。这种差异在页面元素数量增多时尤为明显。

在Canvas出现之前，前端渲染表格只能通过构建复杂的DOM来实现。然而，这种方式会导致浏览器性能成为Web应用的瓶颈，许多开发人员因此放弃了在浏览器上实现电子表格的想法。

Canvas出现后，其快速模式带来的出色性能优势成为了一大亮点，大量、复杂的DOM渲染处理所带来的性能问题因此有了解决之道。

回到电子表格的应用场景，现在已经出现了使用Canvas绘制画布的表格组件。这类组件在渲染数据层时无须重复创建和销毁DOM元素，而且在画布的绘制过程中受到的限制也比DOM元素渲染更少。其中，葡萄城公司的纯前端表格控件——SpreadJS就用到了Canvas实现表格绘制，除了表格之外，Canvas也为数字孪生可视化大屏、页面游戏等应用场景带来了变革（如下图所示）。

六、总结

本文通过介绍Canvas的原理、Canvas的重要性、Canvas在计算与渲染上的作用、Canvas渲染性能优势和Canvas的应用这五个部分，全面而系统地阐述了HTML Canvas在高性能渲染方面的相关知识和技巧。希望读者通过阅读本文能够深入了解Canvas的基本原理和特性，认识到Canvas在Web开发中的重要性，并掌握Canvas在计算与渲染上的作用。