• Trace panel
  • 前提條件
    • 硬件要求
    • 網(wǎng)絡(luò)要求
  • 使用流程
    • 1. 打開調(diào)試器中的Trace面板，按照使用說(shuō)明步驟操作
    • 2. 使用百度 APP 掃碼打開開發(fā)版小程序
    • 3. 體驗(yàn)開發(fā)版小程序
    • 4. 上報(bào)性能數(shù)據(jù)
    • 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. 基本信息
    • 3. 性能結(jié)果（只有啟動(dòng)頁(yè)面會(huì)有數(shù)據(jù)）
    • 4. 詳細(xì)性能指標(biāo)：
      • 1. 啟動(dòng)頁(yè)面時(shí)序圖
      • 2. 渲染頁(yè)面時(shí)序圖
    • 5. 指標(biāo)建議
    • 6.渲染詳細(xì)數(shù)據(jù)
  • 優(yōu)化性能方法： 智能小程序性能優(yōu)化概述

Trace panel

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

創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元青羊做網(wǎng)站,已為上家服務(wù),為青羊各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

前提條件

硬件要求

百度 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. 打開調(diào)試器中的Trace面板，按照使用說(shuō)明步驟操作

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

3. 體驗(yàn)開發(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)擊小程序名稱：

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)類型
• 系統(tǒng)版本：手機(jī)操作系統(tǒng)版本
• 客戶端信息：百度 App 版本

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

• 有意義渲染時(shí)長(zhǎng)（FMP）：從小程序打開到繪制高度>=屏幕高度的時(shí)間
• 上屏?xí)r長(zhǎng)：從小程序打開到首幀渲染時(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ò)程是并行的，詳情參照下圖：

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

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

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

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：Tracepanel
分享地址：http://www.5511xx.com/article/dpsppip.html