关于前端:如何写成高性能的代码一巧用Canvas绘制电子表格

63次阅读

共计 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…

正文完
 0