前些天,突然接到用戶的大量反饋,我們的小程序頻繁出現閃退,崩潰的現象。如圖,
于是馬上著手追查問題,首先確定了導致閃退的頁面。是在一個有長列表的頁面,當上拉加載更多,翻頁翻多幾頁的時候就導致閃退了。經過重重排查(時間問題,這里就不詳細描述排查的方法了,大多數用的都是縮小范圍排除法啦),最后終于確定了問題所在,原來是在列表中,同事最近新加上的css3動畫所致,這里的列表是循環渲染的一個組件,組件中的一個彈窗的彈出和收起,使用動畫,但是這里沒有加上wx:if,導致了循環渲染該動畫,所以翻頁翻著翻著就掛掉了。 確定了問題,就很好辦了,加上條件判斷,只有需要的時候,才渲染彈出彈窗。真機調試,暴力狂刷數據,發現閃退的現象不再出現了,閃退問題解決,然而高興不到三分鐘,又出問題了,發現翻頁到十幾頁的時候,再也刷不動后面的數據了,明明是還有更多數據的。再在開發工具上看查看數據,結果控制臺報了這么一個錯 ![]() 在真機上為:
這是什么問題呢,查看官方文檔,發現是有這樣的限制的
回顧我們的代碼,這里的分頁加載數據,上拉加載,數據是放在一個for循環里去加載,數據源是一個數組對象。在加載下一頁數據時,將下一頁的數據拼到當前數組后面。這里是常規的做法。可以看看代碼:
這里可以看到,每次獲取新的一頁,都要重新setData新的數組,仔細想想,當這個數組到后面越來越大的時候,很容易就超出了單次設置數據超過1024kb的限制了。那么怎么解決這個問題呢,這里官方文檔里面其實有提到一個注意點,
既然這里是支持改變數組的某一項,那么分頁的問題,可以改變為一個二維數組,還是直接看代碼吧。
這里的方法則暫時擺脫了單次設置數據多大的問題。當然,要是單頁的數據過多,還是會出現問題的。最合適的還是對數據結構進行精簡,前端不必要的數據,可以不傳過來前端。 寫在最后,這次第一次寫類似的分享,描述還是有些不清晰,以后可以多嘗試這樣的總結吧。 |