起因
因?yàn)橐鲆粋€畫畫板的功能,所以使用了canvas組件,一開始好多人說小程序canvas性能特別差,也沒太注意,做出來之后確實(shí)有點(diǎn)卡,而且每一筆touchmove時間越長越卡,最終導(dǎo)致頁面卡到無法使用,起初我也以為是canvas卡。
開始找原因
canvas優(yōu)化
第一步肯定是先找一下canvas的問題,網(wǎng)上搜到一些材料優(yōu)化canvas的思路,無非就是以下幾種,詳細(xì)的可以參考我的另一個文章
- 繪制的圖形的數(shù)量和大小會影響canvas的性能, 減少繪制物,減少繪制指令
- 圖形數(shù)量過多,但是只刷新部分 可以使用局部渲染
- 邏輯層和背景圖層分離 可以使用分層渲染
- 某些長時間的邏輯影響主線程的, 可以使用離屏渲染 和webworker 來解決問題
這里做了兩個優(yōu)化:文章來源:http://www.zghlxwxcb.cn/news/detail-498528.html
- 禁用滾動,一開始一直卡的不行,后來查資料發(fā)現(xiàn)滾動跟touchmove事件有沖突,禁用之后好了許多
- 將ctx.stroke()指令放到定時器中執(zhí)行,每50ms執(zhí)行一次,這樣就是一個固定頻率執(zhí)行,不會因?yàn)轭l繁觸發(fā)touchmove導(dǎo)致ctx.stroke()一秒鐘執(zhí)行幾百幾千次
經(jīng)過處理,這些已經(jīng)好了很多,但是當(dāng)繪畫事件變長時還是會變得越來越卡,直到最后卡的,動不了,延遲十幾秒那種,所以繼續(xù)找問題文章來源地址http://www.zghlxwxcb.cn/news/detail-498528.html
<到了這里,關(guān)于小程序canvas畫畫板簽字版,touchmove時卡頓的問題(根本原因是因?yàn)関ue語法中page.data導(dǎo)致視圖層和邏輯層的頻繁通訊導(dǎo)致)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!