chrom 性能分析工具 Performance

在chrom的工具栏,有一个面板performance,点开之后操作后,你会看到一堆五颜六色的图表,但是具体是干什么的,未可知

performance面板是Chrome 的性能分析工具，那应该和页面有关系，所以我们就从页面性能方向开始看一下

一.页面性能受哪些影响

 我感觉和页面性能挂钩的方向大概有：网络情况、服务器、前端渲染效率、用户端的硬件等,接着详细来看下这几个方向

网络

网络往往是页面性能比较关键的地方，域名解析、交换机、路由器、网络服务提供商等,任何一个出问题或响应过慢都会有不好的体验

服务器

因为我们发送的都是http请求,所以请求最终都要服务器来处理，服务器处理不当,无法响应或响应过慢也会直接影响页面的性能

前端的渲染效率

浏览器解析 HTML、CSS、图片等静态资源，呈现给用户的过程

用户与页面交互后，浏览器重新计算需要呈现的内容，然后重新绘制页面的过程

这些处理效率也是影响性能的重要因素

用户硬件

发起网络请求，解析网络响应，页面渲染绘制等过程都需要消耗计算机硬件资源, 所以计算机资源，特别是 CPU 和 GPU 资源短缺时,也会影响页面性能

 

 

Chrome 工具栏的工具 各有自己的侧重点， Network 工具的有资源拉取顺序的详细信息，它的侧重点在于分析网络相关的影响

Performance 工具的侧重点则在于前端渲染过程，它拥有帧率条形图、CPU 使用率面积图、资源瀑布图、主线程火焰图等模块，它们和渲染息息相关，善用它们可以清晰地观察整个渲染阶段。

不用纠结这些关键词,因为后面都会详细的一一给大家讲解到

二.开始性能分析

首先,以下连接是网上找的小demo,我们就围绕着这个demo来进行性能的分析

https://googlechrome.github.io/devtools-samples/jank/

打开demo后,接着打开你浏览器的控制台

 

一般移动端的cpu性能要比电脑若很多,所以我们选择性能较低的场景来进行计算

模拟移动设备的CPU

1. 单击 Performance 选项卡
2. 确保选中了 Screenshots (选中才会有屏幕快照)
3. 单击 设置按钮,其中包含了捕获性能指标相关的设置
4. 对于 CPU选项, 选择 4x slowdown, 进行 CPU 节流，使其比平时慢4倍

DEMO讲解

 因为我们每个人的电脑,性能都有一定的差异,所以此demo可以自定义演示

1. 继续单击 Add 10，直到蓝色方块移动明显比以前慢
2. 单击 Optimize，蓝色方块应该移动得更快更流畅
3. 单击 Un-Optimize，蓝色方块应该移动得更慢且更加卡顿

注意：如果你看不到优化版本和未优化版本之间的明显差异，请尝试单击 Subtract 10 几次，然后再试一次

 

记录运行时的页面性能

1.单击 Record 左上角灰色圆圈, 然后就会捕捉页面运行时的性能指标

2.等待几秒

3.单击 Stop, 停止记录, 分析数据, 然后会将分析结果展示在性能面板中

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

分析帧率

衡量任何动画性能的主要指标就是帧率, 当动画以60 fps的速度运行时, 用户体验是比较好的

 

1.注意FPS图表。只要你看到一条红条，就意味着低帧率，进而影响用户体验, 通常来说，绿色的柱条越高，代表帧率越高

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

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

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

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

 

2.在FPS图表下方，你可以看到CPU图表。CPU图表中的颜色与“性能”面板底部的 Summary 选项卡中的颜色相对应, 每当你看到CPU长时间达到最大负载时，这是进行优化的一个很好的提示

 

 

3.将鼠标悬停在 FPS、CPU 或 NET 图表上, 会显示该页面在该时间点的屏幕截图. 向左和向右移动鼠标以重放记录过程。这称为 scrubbing，它对于手动分析动画过程很有用(如上图)
 

在 Frames 区域中, 将鼠标悬停在其中一个绿色方块上, 会向你显示该特定帧的 FPS, 每帧可能远远低于60 FPS, 红色则相反 

 

查出影响性能的根源

现在已经测量并验证了页面性能表现不好，接下来就是需要知道为什么性能不好

注意 Summary 选项卡，在未选择任何事件时，它呈现了浏览器在整个记录过程中把时间花在哪个部分. 可以看到，页面的大部分时间都花在渲染上

所以现在的目标就是：减少浏览器花费在渲染工作上的时间

 

 

展开 Main 区域，展示了一段时间内主线程上活动图,  x 轴代表着这段时间内的记录，每一个 Bar 都代表了一个事件。Bar 越宽，意味着该活动花费的时间更长。y轴表示调用堆栈，当你看到事件堆叠在一起时，这意味着上面的事件导致了下面的事件

记录过程中有很多数据, 在 OverView 面板（有 CPU, FPS, NET 图表的区域）上，用鼠标单击、按住、拖拽来放大单个 Animation Frame Fired 事件。此时 Main 和 Summary 中展示了选中的区间的相关信息

 注意在 Animation Frame Fired 事件右上角的红三角，代表这个事件可能造成严重的问题   (每当 requestAnimationFrame() 回调调用时, 都会触发 Animation Frame Fired 事件)

 单击某个 Animation Frame Fired 事件, Summary 中会展示与该事件相关的信息. 注意 reveal 链接，单击后，DevTools 会将触发当前的 Animation Frame Fired 事件的事件高亮出来

同时注意 app.js:94 链接，单击后跳转到相应的源码

 

上面就是performance的简单使用啦,后面继续补充......