需用Edge“性能”面板录制分析卡顿等问题：一、打开面板并录制；二、启用高级选项提升精度；三、用火焰图定位耗时函数；四、切换视图分析多维指标；五、添加性能标记辅助业务归因。
如果您希望深入诊断网页在运行过程中的卡顿、高CPU占用或渲染延迟等问题，则需要借助Edge浏览器内置的“性能”面板进行实时录制与深度分析。以下是使用该面板录制和分析运行时性能的具体步骤：
一、打开性能面板并启动录制
性能面板位于DevTools中，用于捕获主线程活动、布局重排、绘制、JavaScript执行等关键运行时指标。启动录制前需确保页面处于可交互状态，并关闭无关标签页以减少干扰。
1、在Edge浏览器中打开目标网页。
2、按 Ctrl+Shift+I（Windows/Linux）或 Command+Option+I（macOS） 打开开发者工具。
3、点击顶部活动栏中的 “性能”选项卡（图标为折线图）。
4、点击左上角的 圆形录制按钮（●） 开始录制；或按 Ctrl+E 快捷键触发。
5、在页面上执行待测操作（如滚动、点击、表单提交等），持续约5–10秒后再次点击录制按钮停止。
二、启用高级录制选项提升诊断精度
默认录制仅包含基础主线程活动，启用附加选项可捕获更细粒度的性能瓶颈线索，例如GPU绘制、内存分配、屏幕截图等。
1、在性能面板顶部，点击 “录制设置”齿轮图标。
2、勾选 “录制时捕获屏幕截图” 以生成帧级视觉回放。
3、勾选 “录制时强制垃圾回收” 可排除内存累积干扰，定位真实泄漏点。
4、勾选 “启用高级绘制检测” 以显示层合成、光栅化与绘制事件详情。
5、若需模拟低性能设备，可在“录制设置”中启用 “录制时限制CPU”（如2×或4×节流）。
三、使用火焰图定位耗时函数
火焰图以可视化方式呈现调用栈的时间分布，纵向表示调用层级，横向宽度代表执行时长，宽而高的条目即为性能热点。
1、录制结束后，面板自动加载结果，主视图默认显示 “火焰图”。
2、将鼠标悬停在任一函数块上，查看其 自执行时间（Self Time）与总时间（Total Time）。
3、右键点击可疑函数，选择 “在火焰图中隐藏函数及其子级” 临时过滤干扰项。
4、使用鼠标滚轮缩放水平轴，聚焦于某一时段；拖动时间轴滑块可快速跳转至特定帧。
5、点击顶部工具栏的 “跟踪事件发起方” 按钮，可追溯某次布局或绘制事件的原始JavaScript调用来源。
四、切换视图分析不同维度指标
性能面板提供多种结构化视图，分别对应不同优化目标：主线程调度、资源生命周期、事件时序关系等。
1、点击顶部标签栏的 “调用树”选项卡，查看函数调用的累计耗时排序，快速识别顶层耗时入口。
2、切换至 “事件日志”选项卡，逐行查看每类事件（如InputEvent、TimerFire、Layout、Paint）的精确触发时间与持续时长。
3、在 “自下而上”选项卡 中，按函数被调用的底层依赖关系组织数据，适用于排查库函数引发的深层开销。
4、勾选左侧边栏的 “交互”、“布局班次”、“动画”、“GPU活动” 等复选框，仅显示对应类型的轨道，降低信息密度。
五、利用性能标记与自定义计时辅助归因
当内置指标不足以覆盖业务逻辑关键路径时，可通过代码注入性能标记，使录制结果与具体业务阶段对齐。
1、在网页JavaScript中插入 performance.mark("user_login_start") 和 performance.mark("user_login_end")。
2、录制完成后，在性能面板的 “性能标记”轨道 中可见自定义标记点。
3、右键点击两个标记，选择 “计算标记之间的时间差”，获得该业务段精确耗时。
4、也可使用 performance.measure("login_duration", "user_login_start", "user_login_end") 直接生成可筛选的measure条目。
