小程序性能優化

張春雷發布于2019-07-01 12:46 / 2330人閱讀

摘要：及時反饋即時地對需要用戶等待的交互操作給出反饋，避免用戶以為小程序無響應渲染性能優化避免不當使用圖片圖片圖片總結圖片避免不當使用圖片使用自定義組件圖片渲染分層繪制到不同不變的部分多帶帶繪制到一個，動態生成的繪制到一個最后再合入到一個

啟動加載性能優化

小程序的啟動加載流程圖片:

典型等待場景
圖片:

1、控制代碼包大小

開啟開發者工具中"上傳代碼時自動壓縮"
及時清理無用代碼和資源文件
減少代碼包中的圖片等資源文件的大小和數量
2、分包加載
圖片: 

分包預下載（即將推出）
圖片: 

獨立分包（即將推出）
圖片: 

3、首屏加載的體驗優化建議
提前請求：異步數據請求不需要等待頁面渲染完成
利用緩存：利用storage API對異步請求數據進行緩存。二次啟動時先利用緩存數據渲染頁面，再進行后臺靜默更新。
避免白屏：先展示頁面骨架和基礎內容。
及時反饋：即時地對需要用戶等待的交互操作給出反饋，避免用戶以為小程序無響應

渲染性能優化
1、避免不當使用setData

圖片:

圖片:

圖片:

總結
圖片:

2、避免不當使用onPageScroll
圖片:

3、使用自定義組件
圖片:

4、canvas渲染
分層繪制到不同canvas
不變的部分多帶帶繪制到一個canvas，
動態生成的繪制到一個canvs

最后再合入到一個canvas

GPU云服務器云服務器個人能注冊小程序嗎小程序能做什么小程序能申請軟著嗎個人能注冊微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31437.html

微信小程序性能優化入門指南

摘要：希望大家看完這篇文章能對小程序性能優化有一定的認識，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。小程序從發布到現在也已經有將近兩年的時間，越來越來多的公司開始重視小程序生態帶來的流量，今年也由于小程序平臺對外能力的越來越多的開放以及小程序平臺的自身優化，越來越多的開發者也自主的投入到小程序的開發當中，現在，作為前端如果會寫小程序，絕對是一個不折不扣的面試加分項。相...

whinc 2019-08-02 11:56 評論0 收藏0
微信小程序性能優化入門指南

摘要：希望大家看完這篇文章能對小程序性能優化有一定的認識，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。小程序從發布到現在也已經有將近兩年的時間，越來越來多的公司開始重視小程序生態帶來的流量，今年也由于小程序平臺對外能力的越來越多的開放以及小程序平臺的自身優化，越來越多的開發者也自主的投入到小程序的開發當中，現在，作為前端如果會寫小程序，絕對是一個不折不扣的面試加分項。相...

heartFollower 2019-08-29 17:11 評論0 收藏0
微信小程序性能優化入門指南

摘要：希望大家看完這篇文章能對小程序性能優化有一定的認識，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏。小程序從發布到現在也已經有將近兩年的時間，越來越來多的公司開始重視小程序生態帶來的流量，今年也由于小程序平臺對外能力的越來越多的開放以及小程序平臺的自身優化，越來越多的開發者也自主的投入到小程序的開發當中，現在，作為前端如果會寫小程序，絕對是一個不折不扣的面試加分項。相...

wenzi 2019-08-23 12:45 評論0 收藏0
小程序性能優化

摘要：及時反饋即時地對需要用戶等待的交互操作給出反饋，避免用戶以為小程序無響應渲染性能優化避免不當使用圖片圖片圖片總結圖片避免不當使用圖片使用自定義組件圖片渲染分層繪制到不同不變的部分單獨繪制到一個，動態生成的繪制到一個最后再合入到一個啟動加載性能優化小程序的啟動加載流程圖片:showImg(https://segmentfault.com/img/bVbss51?w=1158&h=41...

nicercode 2019-08-26 18:27 評論0 收藏0