小程序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：初始化类任务

颜色	任务类型	关键特征
蓝色	加载	网络通信（资源下载，）html解析耗时，长蓝条可能因资源体积大或网络延迟导致
黄色	脚本	JavaScript执行耗时，长黄条通常由复杂的计算，同步阻塞或低效循环引起
紫色	渲染	样式计算，布局重排耗时，频繁出发会显著降低性能
绿色	绘制	像素绘制耗时，常见于高频视觉更新
灰色	其他	系统开销或主线程空闲时段

区域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：总任务耗时