更新时间:2023-07-28 17:42:28贡献者收藏订阅更新我的文档设置返回文档数据收集完毕后,ide 会自动打开性能分析面板,可以在这个面板中查看性能分析报告,其中关键数据如下: 常用的功能有:1时间轴缩放●鼠标:在该区域通过鼠标拖动选择,可切换当前显示的时间范围●键盘快捷键:w(缩小时间范围)、s(扩大时间范围)、a(左移)、d(右移)2网络请求分析本区域按照时间顺序展示本次采集过程中加载的网络资源,包括资源名称、耗时信息,其中每一个矩形标签左侧代表资源开始加载,右侧代表资源加载结束。3渲染帧可视化对小程序某一时刻的文本、图片进行重新绘制,得到的小程序界面基本骨架称为“渲染帧”。渲染帧中文本区域绘制为方框,可代表该文本的位置和大小。渲染帧包含文本和图片信息,由于图片和文本均为重要的业务信息表达载体,因此可以通过渲染帧的变化来可视化小程序的加载过程。4性能指标(timings)该区域通过标签的方式,标记小程序启动的关键时间节点:●fp (first paint):页面首个像素点开始绘制的时刻,无论是否绘制了文本、图片●fcp (first contentful paint):首次绘制文本 / 图片的时刻●lcp (largest contentful paint):渲染面积最大的文本 / 图片的时刻●fmp (first meaningful paint):页面加载结束前最后一次渲染5渲染指令分析该区域展示小程序渲染层中执行的各种事件,例如:●加载 javascript 代码●执行小程序渲染层脚本●小程序框架启动6逻辑层事件分析该区域展示小程序逻辑层中执行的各种事件,例如:●注入小程序框架●小程序框架启动●渲染层准备完毕●跨进程通信(页面初始化、页面首次渲染)7接口调用查看该区域展示小程序执行过程中调用的接口,以及其耗时情况。8摘要和事件日志●摘要:选中上述区域中的标签,在 摘要 区域会显示该标签的基本信息。●事件日志:选中标签后,事件日志 区域显示当前事件的开始时间、自身耗时、总时间、时间内容信息。若没有选中标签,仅选中某个轨道,则 事件日志 区域显示当前视野内整个轨道的事件列表。