chromeperformance页面性能分析使用教程

运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。

一、模拟移动设备的CPU

移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。

1在DevTools中，点击 Performance 的 tab。

2确保 Screenshots checkbox 被选中

3点击 Capture Settings（??）按钮，DevTools会展示很多设置，来模拟各种状况

4对于模拟CPU，选择2x slowdown，于是Devtools就开始模拟两倍低速CPU

5在DevTools中，点击 Record 。这时候Devtools就开始录制各种性能指标

6进行快速操作，点击stop，处理数据，然后显示性能报告

二、分析报告

FPS（frames per second）是用来分析动画的一个主要性能指标。让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿。能保持在60的FPS的话，那么用户体验就是不错的。

为什么是60fps?

我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒。

三、界面介绍

从上到下分别为4个区域 
1：具体条，包含录制，刷新页面分析，清除结果等一系列操作 
2：overview总览图，高度概括随时间线的变动，包括FPS，CPU，NET 
3：火焰图，从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main等 
4：总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理

【Overview】

　　Overview 窗格包含以下三个图表：

　　1、FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿

　　2、CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型

　　3、NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

　　可以放大显示一部分记录，以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后，火焰图会自动缩放以匹配同一部分

　　选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移

【火焰图】

　　在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件

　　在火焰图中选择事件时，Details 窗格会显示与事件相关的其他信息

【总结区域】

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：Javascript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间

Loading事件

Scripting事件

Rendering事件

Painting事件

chrome-performance页面性能分析使用教程