- 什么是Performance面板？
Performance是Chrome开发者工具中的一个工具，用于记录网页某一时刻所有性能指标。
-如何打开Performance？
使用Chrome浏览器控制台，选择Performance。
若常用工具中没有，在more tools中打开
-如何使用Performance？
- 若想获取整个页面从初始化到运行时的所有性能指标，直接点击2号按钮，会自动录制并刷新页面
- 若想获取某个操作或某个时刻的性能指标，点击1号按钮⏺开始录制，并在结束后点击stop结束
-如何通过Performance分析性能？
将整个区域分为5个部分，下面会依次来介绍各个部分区域的功能
-
controls：Performance面板的操作区域，可以控制开始录制和刷新页面，同时可以控制网速和CPU速度，来测试极端情况对性能的影响
-
overview网络性能总览图：在性能报告中，有很多的数据。可以通过双击，拖动、鼠标选取、滚轮滚动等等动作来放大缩小报告范围，从各种时间段来观察分析报告。
- FPS（每秒帧数情况）、CPU（CPU占用情况）、NET（网络资源情况）、HEAP（JS占用情况）一共四项指标。
- 1、FPS【Frames Per Second】：表示每秒传输帧数，是速度单位，用来分析动画的一个主要性能指标。帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；帧率波动很大的动画，亦会使人感觉到卡顿。绿色竖线越高，FPS 越高。 红色表示长时间帧，可能出现卡顿。
- 2、CPU 资源：此面积图指示消耗 CPU 资源的事件类型。颜色与数据统计中的颜色数据表示一致
- 3、NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。
- 4、HEAP：：JavaScrip 执行的时间分布。
-
火焰图,各项指标的堆叠追踪可视化:
