Edge 96 https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/
有章节未开始
入门
有章节未开始
分析运行时性能
- 在 InPrivate 模式中打开 Microsoft Edge。 InPrivate 模式可确保 Microsoft Edge 以干净的状态运行
- 与台式机和笔记本电脑相比，移动设备的 CPU 功率更小。 每当你分析页面时，都可使用 CPU 节流来模拟页面在移动设备上的表现。
- 注释：性能菜单右边设置中可调节cpu的倍数
- 查看 FPS 图表。 每当红色条显示在 FPS上方时，这意味着帧速率下降得过低，可能破坏用户体验。 通常，绿色条越高，FPS 越高。
- CPU 图表充满颜色意味着在录制过程中 CPU 已达到极限。
- 打开 FPS 计数
- 注释：在命令菜单中选择显示每秒帧数
- 展开重点部分。DevTools 将显示一段时间内主线程上活动的帧图表
- 注释：应为“主要”部分
- x 轴表示一段时间内的记录。
- 每个条形表示一个事件。 宽条表示该事件花费了更长的时间。
- Y 轴表示调用堆叠。 当事件堆叠在一起时，这意味着上面的事件导致了下面的事件。
- 另一种缩放方式，将聚焦在 主 部分，选择背景或事件，然后选择 W、 A、 S或 D。
- 每当显示红色三角形时，都会显示一条警告，指出可能有与事件相关的问题。
- 选择动画帧触发事件。 “摘要”面板现在将显示有关该事件的信息。 请注意“显示”链接。
- 注释：框架部分的主要折叠框中每个任务的每一项都可以选择，和js代码相关的项会有对应的链接
- 注释：整个性能面板分为上中下三部分，上部分“概述”包括FPS\CPU等指标，中部分称为框架包含多个折叠框、下部分为面板
有章节未开始
操作步骤
有章节未开始
性能故障排除
性能功能参考
在页面刷新时记录性能指标，然后在加载完成后几秒钟自动停止记录。- 录制时强制收集垃圾（疑问）
- 启用高级画图检测工具（疑问）
- 保存录制内容
- 注释：右键显示保存的是用户配置，保存为json文件，实际为录制的性能分析数据
- 加载录制
- 注释：右键-》加载配置文件
- DevTools 为脚本随机分配颜色。 在上图中，请求来自脚本的函数请求染成为浅绿色。 来自另一个脚本的请求以米色表示。 深黄色代表脚本活动，紫色事件代表渲染活动。 这些深黄色和紫色事件在所有记录中都是一致的。
- 禁用 JS 示例时，只显示上图中 str 中的 Event: choose 和 Function Call 等高级事件。
- 当想查看导致最多工作的根活动时，请使用 “调用树” 面板。
- 注释：因为根据每个活动显示了总时间
- 当想查看直接花费时间最多的活动时，请使用 “自下而上” 面板。
- 注释：在框架选中作用域下根据活动类型进行归类计算总时间
- 当想按照记录期间发生的顺序查看活动时，请使用 “事件日志” 面板。
- 根活动是指那些导致浏览器执行的一些操作。 例如，选择网页时，浏览器将运行 Event 活动作为根活动。 Event 可能会导致处理程序运行等。
- 在 主 部分的火焰图中，根活动位于图表顶部。 在 “调用树” 和 “活动日志” 面板中，根活动是顶级项目。