Chrome Performance 页面性能分析指南

1.背景

性能优化是前端开发一个很是重要的组成部分，如何更好地进行网络传输，如何优化浏览器渲染过程，来定位项目中存在的问题。Chrome DevTools给咱们提供了2种经常使用方式 Audits和Performance，Audits能够对页面进行性能评分，同时，还会给咱们提供一些优化建议。而Performance提供了很是多的运行时数据，能让咱们看到更多细节数据。下面主要介绍一下如何使用DevTools中的Performance来进行性能分析

2.Performance介绍

首先在新的无痕窗口打开网页，打开Chrome DevTools 切换到 Performance 下能够看到如下画面

上图一、3区域按钮能够用来触发性能数据记录，黑色按钮能够记录交互阶段的性能数据，圆形箭头按钮用来记录加载阶段的性能数据。
上图2区域 能够设置当前页面的网络加载速度与cpu运算速度。

下面咱们点击黑色按钮来生成一份交互阶段的性能报告

第一部分：概览

这里最主要是总体的界面渲染的时候，每一个时间段执行的事件顺序，经过上图咱们就能知道咱们每一个时间段（精确到毫秒）都作了什么，当鼠标放上去的时候，咱们还能够大图的形式去查看咱们每一个时间段界面的渲染状况，Performance 就会将几个关键指标，诸如页面帧速 (FPS)、CPU 资源消耗、网络请求流量、V8 内存使用量 (堆内存) 等，按照时间顺序作成图表的形式展示出来。

第二部分：性能面板

性能面板主要包括如下几部分
1.Network 这里咱们能够直观的看到资源加载的顺序与时长
2.Interactions 用来记录用户交互操做，好比点击鼠标、输入文字、动画等
3.Timings 用来记录一些关键的时间节点在什么时候产生的数据信息，诸如 FP、FCP、LCP 等
4.Main 是Performance工具中比较重要的部分，记录了渲染进程中主线程的执行记录，点击main能够看到某个任务执行的具体状况
5.Compositor 合成线程的执行记录，用来记录html绘制阶段 (Paint)结束后的图层合成操做
6.Raster 光栅化线程池，用来让 GPU 执行光栅化的任务
7.GPU GPU进程主线程的执行过程记录，如 能够直观看到什么时候启动GPU加速…
Memory 选项，在勾选后，就会显示该折线图，经过该图能够看出咱们在不一样的时间段的执行状况。咱们能够看到页面中的内存使用的状况，好比 JS Heap(堆)，若是曲线一直在增加，则说明存在内存泄露，若是至关长的一段时间，内存曲线都是没有降低的，这里是有发生内存泄露的可能的。
经过对性能面板各个部分的分析与问题定位，能够更深入的理解浏览器是如何工做的

第三部分：Summary（性能摘要）

它是一个用来统计在咱们检测性能的时间范围内，都作了哪些事情：
Loading ：加载时间
Scripting ：js计算时间
Rendering ：渲染时间
Painting ：绘制时间
Other ：其余时间
Idle ：浏览器闲置时间

3.Performance实践

下面举例来讲明一下性能面板的使用，在无痕窗口下点击自动重启页面，并记录整个页面加载的过程，而后来分析结果～

网络&&白屏

性能面板，有不少不少的参数，咱们要看一些比较常见的。首先看白屏时间和网络加载状况，以下图

上图，咱们能够看几点信息：
本次页面加载的白屏时间约为 150 ms
从网络资源加载状况来看，图片没有启用 http2，所以每次能够同时加载的图片数有限，未被加载的图片有等待过程
资源的加载时间也能够看到
另外，咱们能够看一下资源加载有没有空白期，虽然上图没有，可是若是资源加载之间存在空白期，说明没有充分利用资源加载的空闲时间，能够调整一下。

火焰图

火焰图，主要在 Main 面板中，是咱们分析具体函数耗时最常看的面板，咱们来看一下，如图：

首先，面板中会有不少的 Task，若是是耗时长的 Task，其右上角会标红，这个时候，咱们能够选中标红的 Task，而后放大，看其具体的耗时点。
放大后，这里能够看到都在作哪些操做，哪些函数耗时了多少,这里代码有压缩，看到的是压缩后的函数名。而后咱们点击一下某个函数，在面板最下面，就会出现代码的信息，是哪一个函数，耗时多少，在哪一个文件上的第几行等。这样咱们就很方便地定位到耗时函数了。
同时也能够查看 Main 指标分析代码里面是否存在强制同步布局等操做，分析出来这些缘由以后，咱们能够有针对性地去优化咱们的程序

时间线&&内存状况

在 Timings 的区域，咱们能够看到本次加载的一些关键时间，分别有：

FCP: First Contentful Paint
LCP: Largest Contentful Paint
FMP: First Meaningful Paint
DCL: DOMContentLoaded Event
L: Onload Event
咱们能够选区(选择从白屏到有内容的区域，表明本次的页面加载过程)，能够对照着看一下上面的时间，截图以下：

另外，咱们能够看到页面中的内存使用的状况，好比 JS Heap(堆)，若是曲线一直在增加，则说明存在内存泄露。若是Nodes和Listeners不断增长说明可能存在重复添加节点或者事件的状况。

最下方就是页面的一个总体耗时概况，若是 Scripting 时间过长，则说明 js执行的逻辑太多，能够考虑优化js，若是渲染时间过长，则考虑优化渲染过程，若是空闲时间过多，则能够考虑充分利用起来，好比把一些上报操做放到页面空闲时间再上报等。

4.最后

你们能够本身去尝试一下performance的使用，经过performance能够更直观的理解浏览器的渲染原理与工做流程，同时也可以将浏览器的系统架构、消息循环机制、渲染流水线等前端概念联系到一块儿，加深理解。

做者简介

李长江为好将来前端开发高级专家

招聘信息

好将来技术团队正在热招前端、算法、流媒体后台开发等各个方向高级开发工程师岗位，你们可扫描下方二维码或者微信搜索关注“好将来技术”，点击本公众号“技术招聘”栏目了解详情，欢迎感兴趣的伙伴加入咱们！

也许你还想看

DStack--基于flutter的混合开发框架

WebRTC源码分析——视频流水线创建（上）

"考试"背后的科学：教育测量中的理论与模型（IRT篇）