使用浏览器开发工具分析性能

一、网络分析

1、面板概览：

1. Controls (控件) : 控制面板的功能
2. Filters (过滤器) : 控制在请求列表中显示哪些资源
3. Overview (概览) : 展示检索资源的时间轴，多个垂直堆叠的栏意味着这些资源被同时检索
4. Requests Table (请求列表) : 展示检索的每个资源，默认情况下，此表按时间顺序排序，右键单击列表的任何标题栏可以以添加或删除信息列。
5. Summary (概要) : 展示请求的总数、传输的数据量和加载时间
   

2、面板设置

• 使用大量请求行：资源较少或查看详细情况时打开
• 概览：显示瀑布信息
• 屏幕截图：整个网络请求中页面的渲染情况
  

3、网络请求详情

• DOMContentLoaded：DOM渲染完成时间。即HTML页面由上向下解析HTML结构到末尾封闭标签。
• Load：当前页面所有资源加载完成时间。DOM树构建完成后，继续加载html/css 中的图片资源等外部资源，加载完成后视为页面加载完毕。
  DOMContentLoaded 会比 Load 时间小，两者时间差大致等于外部资源加载的时间。
• Finish： 是页面上所有 http 请求发送到响应完成的时间。
  页面发送请求和页面解析文档结构，分属两个不同的线程，所以Finish 时间与DOMContentLoaded 和 Load 并无直接关系。
  
  

4、缓存测试

5、网络吞吐测试

6、网络请求阻止
使用命令（英文：block，中文：屏蔽）
临时阻止某个资源的加载，评估对整体页面性能的影响，如果因为这个资源消耗了过多的时间，可以考虑去留。

7、请求覆盖
使用命令（英文：coverage，中文：覆盖）
可以根据情况合理优化，例如工具代码的拆包、路由懒加载

二、性能分析

1、控制按钮

• record：开始记录分析运行中的性能表现
• start：刷新页面并性能分析，从加载到最终渲染的性能表现
• clear：清除数据记录
• load profile：导入文件加载其他结果
• save profile：保存分析记录
• Screenshots：运行过程中每一帧的绘制进行拍照截图，可以看到运行时的渲染情况
• Memory：查看内存信息
  

下拉切换性能分析报告：

• 停用JavaScript示例：默认情况下，录制的Main部分显示录制期间调用的 JavaScript 函数的详细调用堆栈。对移动端进行测试建议停用，这样在移动端运行的时候可以减少系统开销。开启后记录中会忽略所有 JavaScript 的调用栈，记录的 Main 部分会比开启更简短。

• 启用高级绘制：会详细记录某些渲染细节，比如图层信息、Paint分析等，测试时间会长一些。
  

• CUP：录制时限制CPU，用于针对各种设备差异进行性能测试。
  例如手机设备比台式机和笔记本的CPU频率小，评估网页需要使用CPU限制来模拟网页在手机设备上的表现。
  

• 网络：录制时限制网络(Network)，用于对网络环境进行性能测试。
  

• 硬件并发：测试具有不同数量的处理器核心的应用程序性能。

2、Overview

• FPS：每秒的帧数。出现红色的长条，说明这部分动画性能有卡帧，需要进行优化，而绿色长条，就说明性能还可以，绿色长条越高，说明性能越好。
  FPS 应该维持在 60 前后，即一秒之内进行 60 次重新渲染，每次重新渲染的时间不能超过 16.7ms 左右。
  fps = 60 性能极佳，fps < 24 会让用户感觉到卡顿，（人眼的识别主要是24帧）
  
  

• CPU：页面加载过程中，各阶段对CPU的占用时间。面积图指示消耗 CPU 资源的事件类型，和底部的summary对应，其中不同的颜色就对应着不同的部分，占用时间越多，表示该部分越需要被优化。
  

• NET：请求的顺序和花费的时间。每条彩色横杠表示一种资源，横杠越长，检索资源所需的时间越长。 也可以在下面的network查看更具体的顺序和耗时，点击network里面的内容在summary中会显示出具体的内容。
  

3、火焰图：x轴是时间进度，y轴是事件调用关系。第一行表示发生的事件，下面的各行是上面事件的子项。

超过50ms的任务是一个长任务，占用CPU时间，无法响应用户操作。

名词	全称	解释	触发时机
DCL	domContentLoaded	dom内容解析完成	HTML 文档完全加载和解析之后，DOMContentLoaded 事件被触发
L	loaded	页面的load事件	在整个页面及所有依赖资源（如样式表和图片）都已完成加载时触发
FP	firstPaint	首次绘制	首个像素开始绘制到屏幕上的时机，常说的白屏时间也就是指访问页面到 FP 的这段时间
FCP	firstContentfulPaint	首次内容绘制	从开始加载到页面内容的任何部分在屏幕上完成渲染的时间，可以是文本、图像（包括背景图像）、svg 元素或非白色的 canvas 元素
LCP	largestContentfulPaint	最大内容绘制	可视区域内可见的最大图像或文本块完成渲染的相对时间

FCP事件指渲染出第一个内容的事件，而FP指渲染出第一个像素点，渲染出的东西可能是内容，也可能不是。

对应优化：浏览器原理系列：FP，FCP，LCP，DCL，L之分析优化

FP、FCP、LCP是指页面的一个状态，是按顺序触发的。FP之前叫做白屏时间，FP到FCP是dom内容绘制阶段，FCP到LCP是最大的dom元素绘制阶段。

DCL和L，一般来说都是DCL在前，极少部分页面是L在前面。如果页面有许多外部资源需要加载，那么load 事件会后触发，如果页面内容较多，外部资源较少，那么load事件可能先触发。

4、事件统计

查看导致最多工作的根活动时，使用“调用树”选项卡。
查看直接花费最多时间的活动时，使用“自下而上”选项卡。
按照记录过程中发生的顺序查看活动时，使用“事件日志”选项卡。

• 摘要：CPU占用时间的总结，可以直观地看到各个事件CPU消耗的占比。
  

正在加载：网络通信和HTML解析
Parse HTML	浏览器执行 HTML 解析
Finish Loading	网络请求完毕事件
Receive Data	请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Send Request	发送网络请求时触发
正在执行脚本：JavaScript 执行
Animation Frame Fired	一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame	取消一个动画帧时触发
GC Event	垃圾回收时触发
DOMContentLoaded	当页面中的 DOM 内容加载并解析完毕时触发
Evaluate Script	A script was evaluated.
Event	js 事件
Function Call	只有当浏览器进入到 js 引擎中时触发
Install Timer	创建计时器（调用 setTimeout()和 setInterval()）时触发
Request Animation Frame	requestAnimationFrame（）调用预定一个新帧
Remove Timer	当清除一个计时器时触发
Time	调用 console.time()触发
Time End	调用 console.timeEnd()触发
Timer Fired	定时器激活回调后触发
XHR Ready State Change	当一个异步请求为就绪状态后触发
XHR Load	当一个异步请求完成加载后触发
渲染：样式计算和布局
Invalidate layout	当 DOM 更改导致页面布局失效时触发
Layout	页面布局计算执行时触发
Recalculate style	Chrome 重新计算元素样式时触发
Scroll	内嵌的视窗滚动时触发
绘制
Composite Layers	Chrome 的渲染引擎完成图片层合并时触发
Image Decode	一个图片资源完成解码后触发
Image Resize	一个图片被修改尺寸后触发
Paint	合并后的层被绘制到对应显示区域后触发

• 自下而上：查看哪些活动直接占用了最多的时间，仅显示录制的选定部分期间的活动。
  

  • 自身耗时：指除去子事件这个事件本身消耗的时间，也就是直接花费在该活动中的总时间。
  • 总时间：这个事件从开始到结束消耗的时间（包含子事件）

• 调用树：主要记录事件调用顺序。
  根活动，是那些导致浏览器做一些工作的活动。例如，当您单击一个页面时，浏览器会触发一个Event活动作为根活动。这Event可能会导致处理程序执行，等等。
  常见的有Event、Paint、Update Layer Tree和Composite Layers等。
  

• 事件日志：按记录期间发生的顺序（执行顺序）查看活动，仅显示录制的选定部分期间的活动。
  

最后！！
附上谷歌官方的Demo地址：Demo