一、什么是CanvasCanvas是一个HTML5的标签，是HTML5的一个新特性，也被称为画板。顾名思义，我们可以将其理解为一块画布，支持在其上绘制矩形、圆形等图形或标志。需要注意的是，与其他标签不同，Canvas只是一个空的画布，不能自己绘制图形，必须通过JavaScript脚本来绘制。大多数现代浏览器都支持Canvas技术，例如Chrome、Firefox和IE9以上的最新版本。IE8及以下不支持H5，所以Canvas也不支持，但是我们可以在Canvas标签之间写内容，提示用户升级或者用支持的浏览器打开。2.Canvas和DOM的区别如果你想画一个图，你有多少种想法？在HTML5出现之前，人们通常使用SVG（本质上是DOM）来绘制，并使用XML语言的特定信息来描述图形，从而进一步渲染图形。也有同学会直接使用DOM进行绘图，比如借助div标签绘制矩形，结合CSS进行样式渲染。比较Canvas和DOM，两者有什么区别？1.绘制的图像格式不同。DOM使用矢量图形进行页面渲染，每个元素都是一个独立的DOM元素。作为一个独立的DOM元素，CSS和JavaScript都可以直接操作DOM并对其进行监控。画布本质上是位图，最小单位是像素，里面的图形不会单独创建DOM元素。2、工作机制不同。如前所述，DOM被渲染为矢量图。如果页面内容复杂，系统会创建大量的DOM元素。浏览器在渲染的时候，需要分析计算所有的DOM元素。巨大的计算量很容易导致页面卡顿或过度渲染。在渲染Canvas时，浏览器的每次重绘都是基于代码的。只需要在内存中构建画布，在JS引擎中执行绘制逻辑，然后遍历整个画布，将像素点的颜色直接输出到屏幕即可。向上。也就是说，无论canvas中有多少元素，浏览器在渲染阶段只需要处理一个canvas，而不用像矢量图一样计算所有的DOM元素。这就是Canvas最大的优势：渲染性能。另外，由于Canvas的绘制是由JS层的代码控制的，因此在灵活性上也比DOM有很大的优势。3、克服电子表格技术的性能难题电子表格发展以来，以其便捷、即时的特点深深影响着人们的生活。微软认为世界上五分之一的成年人使用Excel（摘自“MicrosoftExcel的最新发展”，2017年9月）。随着互联网技术的发展，电子表格与在线系统的结合已经成为大多数企业呈现和分析数据的首选解决方案，发挥着巨大的作用。在实际业务场景中，web表格不仅仅只是展示数据，还自带复杂精美的样式和繁琐灵活的操作，帮助开发者更快的获取综合数据。结合上面分析的Canvas和DOM的工作机制，如果数据量不大，浏览器绘制电子表格时两者的性能差异不会很明显。但是，如果在工业制造、财务会计等行业，使用的电子表格往往有百万行，浏览器不仅需要渲染单元格内容，还需要涉及丰富的数据处理，这会对前端性能。巨大的挑战。传统DOM在渲染时，如果进行更新、滚动等操作，需要不断地销毁和创建DOM，无形中增加了很多无效计算，很容易造成页面卡顿等渲染问题。使用canvas绘制，不会有DOM操作的重复创建和销毁，打破了DOM元素对UI的诸多限制，还可以绘制更多类型的UI元素，比如线性、特殊图形等。目前，业界出现了使用Canvas技术绘制画布的前端表格控件。在使用canvas绘制的过程中，还引入了双缓冲canvas的机制，将不易改变的主题层绘制在缓存canvas中。当渲染行为发生时，只需要克隆缓存画布中的主要图层。在主画布上绘图并附加装饰层元素，这种“双剑”形式极大地优化了电子表格的绘图性能。在线demo体验纯前端表单控件：https://demo.grapecity.com.cn...
