共计 1560 个字符，预计需要花费 4 分钟才能阅读完成。
一、什么是 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…
