网络模拟：可以模拟在3G,4G等网络条件下运行页面

Enable advanced paint instrumentation(slow) 记录渲染事件的细节：选择frames中的一块，可以看到区域四多了个 Layers CPU限制：主要为了模拟底CPU下运行性能

区域2：概览面板（overview）

1 . FPS

FPS ：每秒帧数，对于动画而言标准是保持在60FPS

绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三 Frames 中看到具体的FPS值（见下面第二图）。

多点几次DEMO的 ADD 10 按钮，直到感觉画面不流畅为止，开启分析记录，如下 点击方块可以看到57.1ms内共有18fps

2 . CPU

CPU : 处理各个任务花费的时间，选择一段CPU统计可以在区域四的 Summary 看到统计表格

Scripting 脚本

Rendering 渲染

Painting 绘制

Loading 加载

ldle 闲置

比重占的大的颜色可能有问题，如上图中的紫色部分 Rendering ，表示渲染耗费时间久

3 . NET

NET ：各个请求花费时间 这块可以再 network 里看，更清晰些

区域3：线程面板

1 . Frames

Frames ：帧线程，鼠标悬浮绿色块可以看到fps

2. Main

Main ：主线程，负责执行Javascript, 解析HTML/CSS, 完成绘制。 可以看到主线程调用栈和耗时情况，每个长条都是一个事件，悬浮可以看到耗时和事件名

x轴指时间 最上面的第一条就是事件触发的地方，直到结束，这条线是最长的

y轴指调用栈 上面的event调用了下面的子event，越到下面数量越少（瀑布）

颜色代表各个事件类型，以下列出一些常见的事件

3. Raster

Raster ：Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板

统计面板选择因点击选择不同的目标统计的内容不同

Summary 统计图：展示各个事件阶段耗费的时间

Bottom-Up 排序：可以看到各个事件消耗时间排序 (1) self-time 指除去子事件这个事件本身消耗的时间 (2) total-time 这个事件从开始到结束消耗的时间（包含子事件）

Call Tree 调用栈： Main 选择一个事件，可以看到整个事件的调用栈（从最顶层到最底层，而不是只有当前事件）

Event Log (1) 多了个 start time ，指事件在多少毫秒开始触发的 (2) 右边有事件描述信息

开启实时监控

在控制 ctrl+shift+p 打开命令行

搜索 Show Rendering

勾选 FPS Meter

扩展：浏览器渲染过程

segmentfault.com/a/119000001…

www.bubuko.com/infodetail-…

www.xue63.com/toutiaojy/2…

www.css88.com/doc/chrome-…

www.cnblogs.com/hellotyc/p/…

更多内容点这里： 官方文档