起因
因为要做一个画画板的功能,所以使用了canvas组件,一开始好多人说小程序canvas性能特别差,也没太注意,做出来之后确实有点卡,而且每一笔touchmove时间越长越卡,最终导致页面卡到无法使用,起初我也以为是canvas卡。
开始找原因
canvas优化
第一步肯定是先找一下canvas的问题,网上搜到一些材料优化canvas的思路,无非就是以下几种,详细的可以参考我的另一个文章
- 绘制的图形的数量和大小会影响canvas的性能, 减少绘制物,减少绘制指令
- 图形数量过多,但是只刷新部分 可以使用局部渲染
- 逻辑层和背景图层分离 可以使用分层渲染
- 某些长时间的逻辑影响主线程的, 可以使用离屏渲染 和webworker 来解决问题
这里做了两个优化:文章来源:https://www.toymoban.com/news/detail-498528.html
- 禁用滚动,一开始一直卡的不行,后来查资料发现滚动跟touchmove事件有冲突,禁用之后好了许多
- 将ctx.stroke()指令放到定时器中执行,每50ms执行一次,这样就是一个固定频率执行,不会因为频繁触发touchmove导致ctx.stroke()一秒钟执行几百几千次
经过处理,这些已经好了很多,但是当绘画事件变长时还是会变得越来越卡,直到最后卡的,动不了,延迟十几秒那种,所以继续找问题文章来源地址https://www.toymoban.com/news/detail-498528.html
<到了这里,关于小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!