看看我是如何压榨 canvas 性能的

2022-01-28 09:26:11 +08:00
 moohng

继上一贴 https://www.v2ex.com/t/830653#reply27,本来只是分享一下我的第一个小程序的喜悦,没想到关注的人还挺多的,同时也提出了一大推的问题。

问题比较严重的的就是“画布上面的东西多了之后,清除、撤销、换背景等操作会非常的慢”,然后我自己也找到了问题的原因所在,现在分享一下我的解决思路,供大家参考,如果有更好的方法,欢迎大佬们不吝指教:

  1. 切换背景慢:我将背景图层从 canvas 中分离了出来,在底部搞了一个view,现在切换背景颜色的时候不会重新渲染 canvas ;

  2. 撤销慢:主要是我之前的处理方法不当,后面发现了 canvas 的上下文中其实已经提供了一个强大的方法ctx.getImageDatactx.putImageData,从方法名很容易就能看出,是生成图像数据相关的东西。然后我每次在一个动作完成之后touchend,将当前画布上的内容保存起来,然后每次撤销的时候,取列表中上一步的ImageData重新渲染在画布上。现在不管画布上面多复杂,基本上不会卡顿了。

不过在ctx.getImageData的时候其实还有优化空间,步骤多了之后,占用内存可能会有点大,由于时间有限,也快过年了,只能等年后优化了。

再放上我的小程序码,欢迎大家体验,然后提出宝贵的意见

具体优化细节,等年后整理一下源码,给大家分享出来

现在还坚守在公司摸鱼的大佬们,提前祝大家新年快来!加薪!加薪!!加薪!!!最重要的是脱单😅😅😅😅

3952 次点击
所在节点    程序员
8 条回复
marcong95
2022-01-28 09:51:39 +08:00
好奇一下,小程序的 Canvas 的 ctx 有 get/putImageData 吗? uni-app 那个自称与小程序兼容的框架没有这两个方法来着,我看微信的文档只有 wx.canvasGetImageData ,而且还是异步的,导致 echarts 部分图表不能兼容,有点悲伤。
moohng
2022-01-28 09:55:15 +08:00
@marcong95 uni 那边确实还没有更新,微信官方已经更新了,api 跟 web 端保持一致,直接用微信那边的 api 获取 ctx 就行
jones2000
2022-01-28 10:26:14 +08:00
小程序 get/putImageData 是异步的, 而且图片大直接就报错。 根本就不能。uni 就更不用说了,canvas 卡的要死, 全是异步执行,都不知道开发的人怎么想的,就现在手机的性能还搞异步。
marcong95
2022-01-28 10:28:32 +08:00
@moohng #2 原来如此,那我坐等一波 uni-app 跟进~~
moohng
2022-01-28 10:44:42 +08:00
@jones2000 从这几天体验来看,小程序的 canvas 的性能确实不如 html 里面的 canvas 。我生成的 h5 端代码,感觉比小程序端的更流畅一些
SmiteChow
2022-01-28 10:52:47 +08:00
建议将压榨改成优化
moohng
2022-01-28 10:59:34 +08:00
@SmiteChow 哈哈,用词不当,接受批评
DSKcpp
2022-01-28 16:48:58 +08:00
@moohng 小程序的原理造成就是会有延迟,native 触摸传给 service ,service 再把绘制信息传给 native 层的 skia 渲染,中间多了 2 次通信

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/831052

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX