百度智能小程序 Trace panel

Trace panel

通過 Trace 面板可以使用百度 APP 掃碼打開開發(fā)版小程序，操作小程序后上報數(shù)據(jù)，從而在面板中展示相關(guān)頁面的性能數(shù)據(jù)，快速排查、調(diào)優(yōu)性能問題。

前提條件

硬件要求

百度 APP v11.22 及以上

工具 v3.2.0 及以上

網(wǎng)絡(luò)要求

手機和電腦需要在同一局域網(wǎng)（注意：啟動工具時電腦所連接的網(wǎng)絡(luò)要和手機的網(wǎng)絡(luò)相同，如不相同，需要完全關(guān)閉工具，調(diào)整電腦網(wǎng)絡(luò)后再重啟工具）

使用流程

1. 打開調(diào)試器中的Trace面板，按照使用說明步驟操作

2. 使用百度 APP 掃碼打開開發(fā)版小程序

3. 體驗開發(fā)版小程序

百度 APP 掃碼后對小程序進行操作，可以切換不同頁面，獲取多個頁面的性能數(shù)據(jù)，注意每個頁面體驗 3 秒以上以便數(shù)據(jù)收集；

4. 上報性能數(shù)據(jù)

體驗完畢后點擊右上角三個點，然后從下面浮層中點擊小程序名稱：

5. 在彈出的頁面中點擊上報性能數(shù)據(jù)按鈕進行數(shù)據(jù)上報

6. Trace 面板展示性能數(shù)據(jù)

性能數(shù)據(jù)詳解

1. 頁面切換：可以切換想要查看數(shù)據(jù)的頁面

2. 基本信息

• 操作系統(tǒng)：手機操作系統(tǒng)類型
• 系統(tǒng)版本：手機操作系統(tǒng)版本
• 客戶端信息：手百APP版本

3. 性能結(jié)果（只有啟動頁面會有數(shù)據(jù)）

• 有意義渲染時長（FMP）：從小程序打開到繪制高度>=屏幕高度的時間
• 上屏?xí)r長：從小程序打開到首幀渲染時的時長

4. 詳細(xì)性能指標(biāo)：

1. 啟動頁面時序圖

2. 渲染頁面時序圖

5. 指標(biāo)建議

注：組件創(chuàng)建結(jié)束 - initData 有可能為負(fù)值，這是因為調(diào)用 initData 和組件創(chuàng)建的過程是并行的，詳情參照下圖：

用戶從入口點擊到首屏渲染的全流程

6.渲染詳細(xì)數(shù)據(jù)

優(yōu)化性能方法：

智能小程序性能優(yōu)化概述