小程序Performance面板分析

微信小程序以及支付宝小程序performance面板分析（以下以微信为例）

简介：Performance面板是浏览器开发者工具中性能分析的核心模块，通过可视化时间轴、资源耗时统计等手段，帮助开发者定位性能瓶颈。

1. Proformance核心功能按钮操作说明

a.圆圈开始录制按钮:

--点击后启动性能数据不厚，实时记录JS堆内存，CPU负载，帧率等指标变化

--录制中按钮状态变为红色，界面显示时间轴进度条

b.刷新图标 重新加载/刷新按钮

--强制刷新当前预览页面，清空缓存重新渲染

c.清空按钮

--清除当前录制的性能数据和时间轴

d.上传按钮

--将本地性能报告上传至云端或团队协作平台

e.下载按钮

--保存性能报告到本地折本（JSON/HTML格式)

2.性能录制图模块分析

区域1：CPU/Heap性能概览区：该模块监控主线程的CPU占用率和内存堆Heap分配情况

a.FPS波动：帧率（每秒帧数）反映页面流畅度，FPS波动大或低于60FPS表示页面有卡顿。绿色竖线代表流畅，红色/粉色区域代表卡顿

b.CPU占用率观测：曲线图展示cpu使用百分比（0-100%），灰色：<50%(正常负载)，黄色：50%-80%（需关注） 红色：>80%(高风险)

c.NET网络请求分析（蓝色短线）：每条蓝色短线代表一个网络请求，长度=耗时，横向位置:请求发生的时间点

d.HEAP内存占用分析：折线图显示javsScript堆内存（128MB上限）

区域2：网络性能分析图：可以从时间轴，请求状态，资源类型三个方面拆解

a.时间轴纬度：加载过程的”时间线“

b.请求状态纬度：颜色与形状的”信号灯“

   灰色：通常代表等待状态（如DNS解析、连接建立，资源排队等）

   蓝色：代表数据传输等待状态（资源正在下载，如HTML、CSS、JS、图片等）

c.资源类型纬度：请求块的身份”身份标识“

    请求块中的文字是资源的简写标识

区域3：界面与任务结构分析：关键任务类型与执行逻辑

a.Html解析类任务：

        Parse HTML:解析HTML文档，为DOM树构建奠定基础

        Evaluate Script：执行HTML中<script>标签内的脚本代码（同步脚本会阻塞HTML解析）

        Run Microtasks：执行微任务。

b.脚本执行与事件处理

        Run Script：执行javaScript脚本（同步脚本会阻塞主线程，异步脚本则不会）

        Function Call：函数调用

        Timer Fired：定时器触发的回调函数

c.业务逻辑和框架交互

        handleWxConfigReady：微信小程序配置加载完成后的回调（涉及微信SDK的初始化逻辑）

        emit：事件触发

        init：初始化类任务

区域4：折线图分析清晰分析性能瓶颈定位

a.js heap: javaScrip堆内存占用情况，反映对象、闭包、数组等引用类型的实时消耗

b.MEMORY：页面整体内存占用，包含js heap、DOM节点，渲染缓存等浏览器全部内存消耗

c.CUP：资源使用百分比，标识脚本执行、渲染、布局等任务的处理器负载

d.FPS:每秒渲染帧数，衡量页面流畅度的核心指标

区域5：任务警告栏与时间统计栏：通过警告+时间纬度快速定位性能瓶颈，辅助开发者优化任务逻辑

a.警告信息：提示存在耗时长的人过，可能影响性能或用户体验

b.总时间：任务从启动到完成的完整耗时

c.自耗时间：任务自身执行逻辑消耗的时间，不包含子任务耗时

区域6：任务聚合时间统计栏：以饼图+列表形式，拆解任务执行的时间消耗分布

a.System（self）：系统自身逻辑的耗时

b.System（children）：系统逻辑中子任务的耗时

c.Loading：资源加载阶段耗时

d.Scripting：脚本执行阶段消耗的时间

e.Total：总任务耗时