百度智能小程序 Trace panel

Trace panel

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

前提條件

硬件要求

百度 APP v11.22 及以上

工具 v3.2.0 及以上

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

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

使用流程

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

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

3. 體驗(yàn)開(kāi)發(fā)版小程序

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

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

體驗(yàn)完畢后點(diǎn)擊右上角三個(gè)點(diǎn)，然后從下面浮層中點(diǎn)擊小程序名稱(chēng)：

5. 在彈出的頁(yè)面中點(diǎn)擊上報(bào)性能數(shù)據(jù)按鈕進(jìn)行數(shù)據(jù)上報(bào)

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

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

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

2. 基本信息

• 操作系統(tǒng)：手機(jī)操作系統(tǒng)類(lèi)型
• 系統(tǒng)版本：手機(jī)操作系統(tǒng)版本
• 客戶(hù)端信息：手百APP版本

3. 性能結(jié)果（只有啟動(dòng)頁(yè)面會(huì)有數(shù)據(jù)）

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

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

1. 啟動(dòng)頁(yè)面時(shí)序圖

2. 渲染頁(yè)面時(shí)序圖

5. 指標(biāo)建議

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

用戶(hù)從入口點(diǎn)擊到首屏渲染的全流程

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

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

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