前端电子表格技术实践（一）渲染

对于表格在前端的渲染，我们都知道前端复杂的DOM，会加重浏览器渲染负担。

而表格这种密集的数据展示形式必然会需要大量的DOM来呈现内容

在表格渲染方式上，我们从一开始就采用了HTML 5 Canvas绘制的方式。

我们把Canvas称之为画布，因为整个画布就是一个DOM。这样不仅解决了因界面复杂而导致的DOM元素过多的问题，更是打破了DOM元素渲染对UI的诸多限制，例如线形，特殊图形等，通过画法逻辑，更加精准的UI界面渲染。

同时还解决了浏览器兼容性的问题。

这种Canvas渲染的方式可以说是现在前端渲染这种内容丰富表格、图表的主流方式。

在绘制时我们采用了分层绘制。整个绘制引擎根据油画绘制原理，分为主体图层和装饰图层，主题图层将会渲染持久的，不会轻易改变的元素，例如背景，单元格，表格线等。

而装饰图层则会渲染常变性元素，例如选择框，拖拽框，悬浮效果等。

另外，整个的绘制过程并不是从数据层（Model）直接到视图层（View）的。

我们根据表格内容的特殊性，实现了根据视图层形状，从数据层组合出一层专属视图层的视图数据（ViewModel），

在配合以上的双缓存画布绘制机制，完成整个表格按需绘制的需求，并缓存绘制结果，进一步提升绘制性能。

主体图层不是直接绘制在用户能看到的主画布上，而是绘制在一个看不见的缓存画布上。在需要渲染时，只需要讲缓存画布的内容克隆到主画布上，再附加上装饰图层元素

这样，当表格需要更新时候，比如单元格背景改变，只需要在克隆缓存画布后重绘对应单元格内容即可。

再以表格滚动演示下双缓存画布带来的优势。

当表格滚动结束，需要重绘，我们会将主画布清空，从缓存画布中根据行为上下文进行画布偏移，将偏移后的图层直接绘制在主画布上，随后在主画布上绘制偏移后的剩余部分，最后更新缓存。

使用缓存画布，大大提升了绘制性能，使整个滚动过程更加流畅、顺滑。