因为要做一个画画板的功能,所以使用了canvas组件,一开始好多人说小程序canvas性能特别差,也没太注意,做出来之后确实有点卡,而且每一笔touchmove时间越长越卡,最终导致页面卡到无法使用。
第一步肯定是先找一下canvas的问题,网上搜到一些材料优化canvas的思路,无非就是以下几种,详细的可以参考我的另一个文章
- 绘制的图形的数量和大小会影响canvas的性能, 减少绘制物,减少绘制指令
- 图形数量过多,但是只刷新部分 可以使用局部渲染
- 逻辑层和背景图层分离 可以使用分层渲染
- 某些长时间的逻辑影响主线程的, 可以使用离屏渲染 和webworker 来解决问题
这里做了两个优化:
经过处理,这些已经好了很多,但是当绘画事件变长时还是会变得越来越卡,直到最后卡的,动不了,延迟十几秒那种,所以继续找问题