简介作为一名前端开发者，有时候会遇到开发的页面慢或者卡顿的情况，想解决但又无处下手，这时候我们就可以使用Chrome devtools 的 Performance 面板工具来分析造成的原因。
（本文会忽略一些过于基础的知识和细节）
Performance 即运行时性能表现
它记录页面运行一段时间内的性能情况，诸如fps，cpu，NETwork，memory等，以及哪些部分占用了这些资源，你可以通过找到占用这些资源的代码来分析瓶颈所在
在开始之前你也可以看看前面的一些内容
Performance面板如下：
- 使用隐身窗口，打开项目（比如在线测试DEMO）
- 点击录制按钮（黑点），开始记录此段时间内页面运行性能
- 点击stop停止
演示
面板功能分析如下划分成4个区域
区域1：控制面板
- Screenshots
截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里）
Screenshots
通过在时间线上移动观察页面的变化
- Memory
内存消耗记录：勾选后可以看到各种内存消耗曲线
【以下配置都是用来模拟手机、慢网络下使用的，无需可以跳过】
- Disable javaScript samples
关闭javaScript样本：减少在手机运行时的开销，模拟手机运行时勾选
- Network
网络模拟：可以模拟在3G,4G等网络条件下运行页面
- Enable advanced paint instrumentation (slow)
记录渲染事件的细节：选择frames中的一块，可以看到区域四多了个Layers
Layers
- CPU
CPU限制：主要为了模拟底CPU下运行性能
区域2：概览面板（overview）
区域2
1 . FPS
FPS：每秒帧数，对于动画而言标准是保持在60FPS
☆ 优化
绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值（见下面第二图）。
☆测试
多点几次DEMO的 ADD 10 按钮，直到感觉画面不流畅为止，开启分析记录，如下
FPS低
点击方块可以看到57.1ms内共有18fps
2 . CPU
CPU: 处理各个任务花费的时间，选择一段CPU统计可以在区域四的Summary看到统计表格
Summary统计
- Scripting 脚本
- Rendering 渲染
- Painting 绘制
- Loading 加载
- ldle 闲置
☆ 优化
比重占的大的颜色可能有问题，如上图中的紫色部分Rendering，表示渲染耗费时间久
3 . NET
NET：各个请求花费时间
这块可以再network里看，更清晰些
NET
今天的内容就到这里了，下篇介绍区域三和区域四，关注一下不迷路哦~
[征文：私信小编]
html css html css javascript html javascript css javascript css
