必须用刷新模式捕获完整加载过程，因仅此方式能覆盖DNS、TLS、TTFB等导航前环节；手动F5会漏掉关键帧与资源依赖链。
当你需要定位网页首次打开时卡顿、白屏时间长或资源加载异常缓慢的问题，必须捕获完整的页面加载过程并分析关键帧与资源依赖链——仅靠运行时录制会漏掉导航开始前的DNS、TLS、首字节等环节。
用刷新模式完整捕获加载性能
这是唯一能覆盖从地址栏输入到DOMContentLoaded全过程的方法，其他方式均无法记录导航发起阶段。
在Edge中打开目标网页，确保当前标签页处于激活状态。
右键网页任意空白处→选择“检查”→DevTools自动弹出后，顶部活动栏点击“性能”工具图标（若未显示，点“更多工具”→选“性能”）。
点击性能面板左上角的“刷新页面”按钮（带循环箭头的圆形图标），而不是手动按F5或地址栏回车——【只有此按钮能同步触发页面刷新与性能录制，手动刷新会导致录制中断或漏掉导航事件】。
等待页面完全加载完成（通常3–6秒），DevTools会自动停止录制并展开时间轴；此时下方“Summary”面板中会高亮显示LCP、FCP、TTFB等核心指标，直接定位最大内容绘制延迟是否由图片未加载、字体阻塞或JS执行过长导致。
启用屏幕截图精确定位渲染卡顿帧
当时间轴显示某段主线程空闲但页面视觉无变化时，需确认是否真正在渲染，还是被GPU合成卡住。
在性能面板顶部，勾选“屏幕截图”复选框。
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
再次点击“刷新页面”按钮重新录制一次——这次每100ms会捕获一帧画面并叠加在时间轴下方轨道中。
拖动时间轴滑块，观察截图序列：若连续3帧以上画面静止不动，而上方CPU曲线却呈锯齿状波动，说明渲染管线被阻塞，问题大概率出在CSS动画未启用will-change、大量重绘或WebGL上下文争抢。
分离网络与JS执行瓶颈
加载慢不等于JS慢，很多情况下是网络请求串行阻塞了后续资源，需拆解验证。
第一步：关闭所有扩展程序 → 在地址栏输入 edge://extensions → 关闭全部开关 → 重启Edge。
第二步：打开待测网页 → 按Ctrl+Shift+I → 切换到“Network”面板 → 勾选“Disable cache” → 点击左上角刷新按钮重新加载。
第三步：在Network列表中按“Waterfall”列排序，找出耗时最长的请求；若该请求的“Initiator”列为“Other”，说明它由HTML解析直接触发，不是JS动态加载——此时应检查该资源是否过大、未压缩或CDN未命中。
第四步：回到“Performance”面板→点击“刷新页面”录制→停止后，在时间轴中定位到该慢请求结束时刻→将鼠标悬停在紧随其后的JavaScript调用堆栈上，看是否有parseHTML、evalScript等长任务堆积。
