一 Trace介紹
微信小程序開發工具中提供了Trace工具,利用Trace工具可監控小程序的性能。分析Trace文件可獲取內存、CPU、FPS、啟動時間、各函數的執行時間等。
二 環境搭建
2.1安裝adb
下載鏈接: https://pan.baidu.com/s/1KWAyNI_9pWwYSf3hgQ3zyQ 提取碼: ywq5
2.2安裝微信小程序開發工具
下載鏈接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安裝最新的穩定版。
2.3手機與電腦連接
手機設置允許USB調試,以小米手機為例:
手機設置 -> 我的設備 -> 全部參數 -> MIUI版本連續點擊多次直到出現您已處於開發者模式 -> 重新回到設置 -> 更多設置 -> 開發者選項 -> 允許USB調試
檢查手機是否和電腦連接成功:
adb devices
三 操作步驟
3.1開發者工具導入項目代碼
登錄微信小程序開發者工具 -> 小程序 -> 點擊加號導入項目代碼
3.2開發者工具選擇設備
調試器窗口 -> Choose Device
3.3手機端打開小程序
手機端進入要測試的小程序
開發者工具點擊真機調試,生成二維碼
手機掃碼
3.4性能監控面板
開發調試 -> 打開性能監控面板
可選擇導出Trace數據
四 使用Trace測試小程序性能
以江南布衣小程序店鋪舉例:
4.1 整體性能
CPU:微信小程序進程的CPU占用率,不到1%
內存:微信小程序進程的內存占用,54m
頁面切換耗時:微信小程序頁面切換耗時,3123ms
啟動耗時:微信小程序啟動耗時,6980ms
初次渲染耗時:微信小程序頁面首次渲染的耗時,639ms
再次渲染耗時:微信小程序再次渲染的耗時,3ms
幀率/FPS:微信小程序幀率,60fps
數據緩存:微信小程序數據緩存,不到1B
4.2 耗時比較久的模塊
a 菜單欄“發現”->“穿搭研究室”->“選取商品”->“買家秀”
b 菜單欄點擊封面->進入商品列表->商品列表點擊某個商品進入商品詳情頁面
c 調用initConfirmOrder接口耗時時間