一、什么是Canvas

Canvas是HTML5的标签，是HTML5的一种新个性，又称画板。顾名思义，咱们能够将其了解为一块画布，反对在下面绘制矩形、圆形等图形或logo等。
须要留神的是，与其余标签不同，Canvas只是一块空画布，其自身是不能绘制图形的，必须通过JavaScript 脚本进行绘制。

大多数古代浏览器都反对Canvas技术，例如Chrome、Firefox以及最新的IE9以上版本。
IE8及以下不反对H5，所以也不反对Canvas，不过咱们能够在Canvas标签之间书写内容，来提醒用户降级或应用反对的浏览器关上。

二、Canvas与DOM的区别

如果想绘制一个图形，你会有几种思路呢？

在HTML5呈现之前，大家通常会应用SVG（实质上也是DOM）绘制，应用XML语言中形容图形的具体信息，进一步渲染图形。

也有同学会间接应用DOM进行绘制，比方借助div标签画个矩形，并联合CSS进行款式的渲染。

比照Canvas和DOM，二者到底有哪些区别呢？

1、绘制的图片格式不同

DOM是应用矢量图进行页面渲染的，每一个元素都是一个独立的DOM元素。作为一个独立的DOM元素，CSS和JavaScript都能够间接操纵DOM，对其进行监听。
而canvas实质上是一张位图，其形成最小单位是像素，其中的图形不会独自创立DOM元素。

2、工作机制不同

后面提到，DOM作为矢量图进行渲染，如果页面内容简单时，零碎就会创立特地多的DOM元素。浏览器在渲染时就须要对所有的DOM元素进行解析计算，宏大的计算量易导致页面卡顿或者渲染适度。

在渲染Canvas时，浏览器的每次重绘都是基于代码的，只须要在内存中构建出画布，在JS引擎中执行绘制逻辑，而后遍历整个画布中像素点的色彩间接输入到屏幕就能够了。
也就是说，不论canvas中的元素有多少个，浏览器在渲染阶段也只须要解决一张画布，而不是像矢量图那样，须要对所有的DOM元素进行计算。这也就是Canvas的最大劣势：渲染性能。

除此之外，因为Canvas的绘制是在JS层通过代码管制的，所以在灵活性方面较DOM也有很大的劣势。

三、攻克电子表格技术的性能难点

电子表格倒退以来，以其便捷性、即时性深深影响了人们的生存。微软认为世界上每五个成年人中就有一个应用 Excel (源于“微软 Excel 的最新倒退” ，2017年9月)。随着互联网技术的倒退，电子表格联合在线零碎也成为大多企业出现剖析数据的优选计划，施展出微小的作用。

在理论的业务场景中，Web表格不仅只是展现数据，随同来的还有简单精美的款式、繁琐灵便的操作，来帮忙开发者更快捷地获取整合数据。

联合前文剖析的Canvas和DOM工作机制，如果数据量不大，浏览器绘制电子表格时二者性能差别不会很显著。
但如果在工业制作、金融财会等行业中，所应用电子表格动辄就是上百万行，浏览器不仅须要对单元格内容进行渲染，还须要波及到丰盛的数据处理，这对前端性能就会有很大的挑战。

传统的DOM进行渲染时，如果执行更新、滚动等操作，就须要不停地销毁创立DOM，这无形中也减少了大量有效计算，容易造成页面卡顿等渲染问题。
而应用canvas绘制，就不会有反复创立、销毁DOM操作，突破了DOM元素对UI的诸多限度，同时也能够绘制品种更为丰盛的UI元素，如线性、非凡图形等。

目前业内曾经呈现了应用Canvas技术绘制画布的前端表格控件。
在应用canvas绘制的过程中，还引入了双缓存画布的机制，将不易扭转的主题图层绘制在缓存画布中，在产生渲染行为时，只须要将缓存画布中的主体图层通过克隆的形式绘制在主画布，并附加装璜图层元素，这种“双剑合璧“的模式大大优化了电子表格的绘制性能。

在线demo体验纯前端表格控件：https://demo.grapecity.com.cn...