在实际应用中需要在前端对复杂内容进行渲染或者处理大量数据时，为了更好地对性能进行优化，现在已经有很多项目实际采用了Canvas的双缓存画布和油画分层技术。我们在做电子表格技术选型时也考虑到了这些问题，在电子表格应用项目中，我们动辄需要处理百万数量级数据内容，这种情况下浏览器对表格内容渲染和数据处理的性能就显得无比重要。
上图是纯前端电子表格中50000*20=100000个数据，处理只需要0.038s。在该纯前端电子表格中，整个绘制引擎根据油画绘制原理，分为主体图层和装饰图层，主题图层将会渲染持久的，不会轻易改变的元素，例如背景，单元格，表格线等。而装饰图层则会渲染常变性元素，例如选择框，拖拽框，悬浮效果等。在下图中第一层到第四层都是主体图层的内容，第五层是装饰图层。
除此之外整个的绘制过程并不是从数据层（Model）直接到视图层（View）的。而是根据表格内容的特殊性，实现了根据视图层形状，从数据层组合出一层专属视图层的视图数据（ViewModel），再配合前文提到的双缓存画布绘制机制，完成整个表格按需绘制的需求，并缓存绘制结果，进一步提升绘制性能。
主体图层不是直接绘制在用户能看到的主画布上，而是绘制在一个看不见的缓存画布上。在需要渲染时，只需要讲缓存画布的内容克隆到主画布上，再附加上装饰图层元素
这样，当表格需要更新时候，比如单元格背景改变，只需要在克隆缓存画布后重绘对应单元格内容即可。
而当表格向下滚动时，表格滚动结束，需要重绘，主画布会被清空，然后从缓存画布中根据行为上下文进行画布偏移，将偏移后的图层直接绘制在主画布上，随后在主画布上绘制偏移后的剩余部分，最后更新缓存。
使用缓存画布和油画分层机制，大大提升了绘制性能，使整个滚动过程更加流畅、顺滑。