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个圆形的500500的图片，根据耗时打算比拟，Canvas耗费的韶光险些只有SVG的一半：
三. 打算与渲染
把动画的一帧渲染出来，须要经由以下步骤：
打算：处理网页渲染逻辑，打算每个工具的状态和位置。渲染：真正把工具绘制出来。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在打算与渲染上的浸染。
