Chrome DevTools 二： Performance 性能面板

Chrome DevTools 二： Performance 性能面板

引用

CSDN

1.

https://m.blog.csdn.net/lunhui1994_/article/details/143023091

Chrome DevTools的Performance面板是前端开发中常用的性能分析工具，可以帮助开发者记录和分析页面运行中的所有活动，从而解决前端性能问题。本文将详细介绍Performance面板的各项功能及其使用方法。

性能面板 Performance

记录和分析页面运行中的所有活动，是解决前端性能问题的重要工具。

控制栏功能

1. 录制:点击 Record （按Ctrl+E），开始录制。记录时按钮会变成红色。再次点击停止记录；
2. 刷新:刷新页面重新分析；
3. 清除:清除页面分析结果；
4. 上下箭头:用来上传和下载每一次性能检测报告；
5. Screendshots:显示屏幕快照，是用来查看在每个时间段界面的变化；
6. Memory:存储调用栈的大小，在不同时间段的不同大小；
7. Disable Javascript samples:禁用 JavaScript 调用栈；
8. Enable advanced paint instrumentation(slow):记录渲染事件的细节；
9. Network:
   模拟不同的网络环境
   ，网络环境配置是必须的，因为我们在做性能优化的方案时，需要有确定的网络环境来对比优化前后的量化指标。
10. CPU:模拟不同的CPU运行速度

性能记录

准备记录之前，最好打开一个无痕模式下的chrome，避免我们安装的其他插件对结果造成影响。

运行时性能

1. 首先进入目标页面，打开 performance 面板
2. 点击 record 开始记录；
3. 和页面的交互会被记录；
4. 再次点击record 停止记录。

加载性能

1. 首先进入目标页面，打开 performance 面板
2. 点击 reload 开始记录；
3. 开发者工具首先会前往
   about:blank
   ，以清除所有剩余的屏幕截图和跟踪记录。在页面重新加载时记录性能指标，然后自动停止。

网页活动内容

devtools会自动聚焦大部分活动的范围区间

各颜色代表意义

• 蓝色 Loading：加载耗时
• 黄色 Scripting：脚本执行耗时
• 紫色 Rendering：渲染耗时
• 绿色 Painting：绘制耗时
• 灰色 Ohter：系统时间
• 白色 Idle：空闲时间

FPS

图示蓝框里面的一条红色部分是FPS，也就是帧率，预期是帧率越高，动画效果越好，红色代表帧率下降较多，绿色代表帧率较高

CPU

CPU图表中的颜色对应于“性能”面板底部的Summary标签页中的颜色。CPU图表充满了颜色这一事实意味着，在记录期间 CPU 已用尽。每当您看到 CPU 长时间达到上限时，系统就会提示设法减少工作量。

缩略图

鼠标悬浮在CPU或NET面板上会展示当前时刻的屏幕截图

选择区间范围

CSS选择器性能分析

Selector Stats