uniapp 優化建議

https://uniapp.dcloud.io/performance

uni-app 中,定義在 data 裏面的數據每次變化時都會通知視圖層重新渲染頁面。所以如果不是視圖所需要的變量,可以不定義在 data 中,可在外部定義變量或直接掛載在vue實例上,以避免造成資源浪費。

長列表
  • 長列表中如果每個item有一個點贊按鈕,點擊後點贊數字+1,此時點贊組件必須是一個單獨引用的組件,才能做到差量數據更新。否則會造成整個列表數據重載。
  • 長列表中每個item並不一定需要做成組件,取決於你的業務中是否需要差量更新某一行item的數據,如沒有此類需求則不應該引入大量組件。(點擊item後背景變色,屬於css調整,沒有更新data數據和渲染,不涉及這個問題)
  • app端nvue的長列表應該使用list組件,有自動的渲染資源回收機制。vue頁面使用頁面滾動的性能,好於使用scroll-view的區域滾動。uni ui封裝了uList組件,在app-nvue下使用了list組件,在其他環境使用頁面滾動,自動適配,強烈推薦開發者使用,避免自己寫的不好產生性能問題。
  • 如需要左右滑動的長列表,請在HBuilderX新建uni-app項目選新聞模板,那是一個標杆實現。自己用swiper和scroll-view做很容易引發性能問題。
減少一次性渲染的節點數量

頁面初始化時,邏輯層如果一次性向視圖層傳遞很大的數據,使視圖層一次性渲染大量節點,可能造成通訊變慢、頁面切換卡頓,所以建議以局部更新頁面的方式渲染頁面。如:服務端返回100條數據,可進行分批加載,一次加載50條,500ms 後進行下一次加載。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章