小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)

起因

因为要做一个画画板的功能，所以使用了canvas组件，一开始好多人说小程序canvas性能特别差，也没太注意，做出来之后确实有点卡，而且每一笔touchmove时间越长越卡，最终导致页面卡到无法使用,起初我也以为是canvas卡。

开始找原因

canvas优化

第一步肯定是先找一下canvas的问题，网上搜到一些材料优化canvas的思路，无非就是以下几种，详细的可以参考我的另一个文章

1. 绘制的图形的数量和大小会影响canvas的性能， 减少绘制物，减少绘制指令
2. 图形数量过多，但是只刷新部分 可以使用局部渲染
3. 逻辑层和背景图层分离 可以使用分层渲染
4. 某些长时间的逻辑影响主线程的， 可以使用离屏渲染 和webworker 来解决问题

这里做了两个优化：

1. 禁用滚动，一开始一直卡的不行，后来查资料发现滚动跟touchmove事件有冲突，禁用之后好了许多
2. 将ctx.stroke()指令放到定时器中执行，每50ms执行一次，这样就是一个固定频率执行，不会因为频繁触发touchmove导致ctx.stroke()一秒钟执行几百几千次

经过处理，这些已经好了很多，但是当绘画事件变长时还是会变得越来越卡，直到最后卡的，动不了，延迟十几秒那种，所以继续找问题

<