利用ChromeDevTools进行页面性能分析的步骤说明（前端性能优化）

利⽤ChromeDevTools进⾏页⾯性能分析的步骤说明（前端性能优化）
背景
我们经常使⽤ Chrome Dev Tools 来开发调试，但是很少知道怎么利⽤它来分析页⾯性能，这篇⽂章，我将详细说明怎样利⽤ Chrome Dev Tools 进⾏页⾯性能分析及性能报告数据如何解读。

分析⾯板介绍
上图是 Chrome Dev Tools 的⼀个截图，其中，我认为能⽤于进⾏页⾯性能快速分析的主要是图中圈出来的⼏个模块功能，这⾥简单介绍⼀下：
Network : 页⾯中各种资源请求的情况，这⾥能看到资源的名称、状态、使⽤的协议(http1/http2/quic...)、资源类型、资源⼤⼩、资源时间线等情况
Performance : 页⾯各项性能指标的⽕焰图，这⾥能看到⽩屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息
Memory : 可以记录某个时刻的页⾯内存情况，⼀般⽤于分析内存泄露
JavaScript Profiler : 可以记录函数的耗时情况，⽅便找出耗时较多的函数
Layers : 展⽰页⾯中的分层情况
分析步骤说明
⾸先，我们在分析的时候，建议使⽤隐⾝模式打开页⾯，排除⼀些插件等因素对页⾯性能情况的影响。

然后，我们把页⾯缓存勾选去掉，要测 disable cache 的情况，再把⽹络情况调整⼀下，我们⽤电脑打开页⾯的时候⼀般都连着 wifi 等，要更真实⼀些去测页⾯的性能，还是把⽹络调到 3G 等情况⽐较好，如图：
调整好之后，我们切到 Performance ⾯板，这⾥先说明⼀下⼀些按钮的作⽤：
上图，从左到右分别代表的是：
⼿动开始记录，开始后需要⼿动结束
⾃动重启页⾯，并记录整个页⾯加载的过程。

这个是最常⽤的，⼀般⼤概分析页⾯性能的时候都是点这个就够了
清除性能录制的记录
上传页⾯性能录制的数据
下载页⾯性能录制的数据
选择要展⽰的性能记录。

你可能进⾏了多次分析，这⾥可以切换去看每次的结果
是否捕捉页⾯加载过程的截图，这个⼀般都要勾选
是否记录内存变化，这个⼀般都要勾选
垃圾回收，点击了即进⾏⼀次垃圾回收
这⾥，我以京东的⼀个页⾯为例,勾选 disable cache,⽹络情况为 Fast 3G，来说明⼀下，应该如何理解性能结果，找出优化点。

从⽹络⾯板分析
我们来看看⽹络⾯板，看看都有哪些信息。

如下图所⽰：
从图中可以看出，页⾯中有的⼀些性能优化⼿段有：
页⾯直出，输⼊https:///wxportal/index_v6,页⾯加载回来的 document 就是⼀个渲染好的 html 页⾯
图⽚优化，部署在不同的CDN域名下，⽤webp/dpg等格式图⽚，图⽚切割等
http 协议有部分采⽤ http2，多路复⽤，加快资源加载
⼩ logo 使⽤base42来处理
按需加载，菜单先加载第⼀屏的图标，滑动到第⼆屏时再加载第⼆屏的图标
⽽从图⽚，个⼈认为，还可以考虑⽤上的⼀些性能优化⼿段有：
html 的⼤⼩为138kb,Content Download的时间为七百多毫秒，感觉可以拆分⼀下页⾯，⾮⼀⼆屏的内容分开加载。

TTFB(Time To First Byte)为五百多毫秒,在下载第⼀个字节之前等待的时间过久，不过这⾥主要是⽤户⽹络情况影响，可以做的⽐较少。

如DNS解析优化，减少后端服务处理时间等合并雪碧图，⼤轮播图下⾯的菜单分类那⾥的图标，可以⽤⼀张雪碧图来集合这些图标
顶部轮播图，在⾸次加载时，可以先加载第⼀帧的图⽚，后⾯⼏帧延后⼀下
图⽚较多，可以的话，都⽤ http2 协议
从性能⾯板分析
切到 Performance ⾯板，点击⾃动重启页⾯，并记录整个页⾯加载的过程，然后来分析结果～
⽹络&&⽩屏
性能⾯板，有很多很多的参数，我们要看⼀些⽐较常见的。

⾸先看⽩屏时间和⽹络加载情况，如下图：
上图，我们可以看⼏点信息：
本次页⾯加载的⽩屏时间约为 1000 ms
FPS 曲线没有标红，如果有很多标红的则说明页⾯存在渲染卡顿多的地⽅
从⽹络资源加载情况来看，图⽚没有启⽤ http2，因此每次可以同时加载的图⽚数有限，未被加载的图⽚有等待过程
资源的加载时间也可以看到，⽐如轮播的背景图加载了近 700 毫秒，时间有点长
另外，我们可以看⼀下资源加载有没有空⽩期，虽然上图没有，但是如果资源加载之间存在空⽩期，说明没有充分利⽤资源加载的空闲时间，可以调整⼀下。

⽕焰图
⽕焰图，主要在 Main ⾯板中，是我们分析具体函数耗时最常看的⾯板，我们来看⼀下，如图：
⾸先，⾯板中会有很多的 Task，如果是耗时长的 Task，其右上⾓会标红(图中没有，说明页⾯⾸屏的逻辑处理分配得还不错)，这个时候，我们可以选中标红的 Task (这⾥就随⼿选中⼀个)，然后放⼤(选中，滑动⿏标可放⼤)，看其具体的耗时点。

放⼤后，这⾥可以看到都在做哪些操作，哪些函数耗时了多少,这⾥代码有压缩，看到的是压缩后的函数名。

然后我们点击⼀下某个函数，在⾯板最下⾯，就会出现代码的信息，是哪个函数，耗时多少，在哪个⽂件上的第⼏⾏等。

这样我们就很⽅便地定位到耗时函数了。

还可以横向切换 tab ，看它的调⽤栈等情况，更⽅便地找到对应代码。

具体⼤家可以试试～
时间线&&内存情况
在 Timings 的区域，我们可以看到本次加载的⼀些关键时间，分别有：
FCP: First Contentful Paint
LCP: Largest Contentful Paint
FMP: First Meaningful Paint
DCL: DOMContentLoaded Event
L: Onload Event
我们可以选区(选择从⽩屏到有内容的区域，代表本次的页⾯加载过程)，可以对照着看⼀下上⾯的时间，截图如下：
另外，我们可以看到页⾯中的内存使⽤的情况，⽐如 JS Heap(堆)，如果曲线⼀直在增长，则说明存在内存泄露，从图中可以看出，相当长的⼀段时间，内存曲线都是没有下降的，这⾥是有发⽣内存泄露的可能的，在 Onload 之后，内存才得到释放。

更多内存泄露产⽣的原因及分析⽅法，可以参照我的这篇⽂章《》
最下⽅就是页⾯的⼀个整理耗时概况，如果 Scripting 时间过长，则说明 js执⾏的逻辑太多，可以考虑优化js，如果渲染时间过长，则考虑优化渲染过程，如果空闲时间过多，则可以考虑充分利⽤起来，⽐如把⼀些上报操作放到页⾯空闲时间再上报等。

其他⾯板
以上就是性能⾯板可以看的⼀些信息。

另外，我们可以借助 Layers⾯板来查看页⾯分层情况的3D视图，Rendering⾯板(点击more tools->Rendering即可打开)，勾选Layer Bordersk可以看到复合层、RenderLayer区域，可以帮助分析动画卡顿、是否开启GPU加速等问题，⽽ Memory ⾯板和 JavaScript Profiler ⾯板主要是分析内存泄露的，这⾥就不说了，可以看我另⼀篇⽂章《》
⽤Audits⼯具分析
Audits 其实就是 LightHouse，LightHouse 是Google开源的⼀个⾃动化测试⼯具，它通过⼀系列的规则来对⽹页进⾏评估分析，最终给出⼀份评估报告。

它的⾯板是这样的：
整体情况
Audits主要从5个⽅⾯来给⽹页打分，当然你也可以去掉某些⽅⾯的评估。

在选择了设备、评估⽅⾯、⽹络情况等选项后，点击 Run Audits ,我们将会得到⼀份报告。

上图是⼀个总体报告，可以看出，这个页⾯的性能不太合格。

当然⼀次的测试也说明不了什么问题，只能做个参考。

我们看它的性能指标分别有：
First Contentful Paint：内容⾸次开始绘制。

First Meaningful Paint：可以简单理解为⽤户看到⽹页主要内容的时间，分数越低，页⾯显⽰其主要内容的速度就越快。

图中例⼦，⽹页⾸次有效绘制时间为2.5s。

Speed Index：速度指标是⼀个页⾯加载性能指标，向你展⽰明显填充页⾯内容的速度，此指标的分数越低越好。

First CPU Idle：⾸次 CPU 空闲时间
Time to Interactive：可互动时间，页⾯中的⼤多数⽹络资源完成加载并且CPU在很长⼀段时间都很空闲的所需的时间。

此时可以预期cpu⾮常空闲，可以及时的处理⽤户的交互操作。

Max Potential First Input Delay：最⼤的输⼊延迟时间，输⼊响应能⼒对⽤户如何看待你应⽤的性能起着关键作⽤。

应⽤有 100 毫秒的时间响应⽤户输⼊。

如果超过此时间，⽤户就会认为应⽤反应迟缓。

这些时间，都可以点击图中红框切换展⽰⽅式，会附上对应的时间解释，然后可以点击 Learn more 来查看详细的指标介绍。

在⽂档中，每⼀项指标都会明确的分为三个部分：为什么说此审查⾮常重要；如何通过此审查；如何实现此审查；
性能指标优化建议解读
性能建议主要分为3类， Opportunities 可优化项、⼿动诊断项、通过的审查项。

本次的例⼦如下图：
图中的每⼀项都可以展开来看明细解释，其中：
可优化项有2个建议：
延迟会阻塞渲染的资源加载，这⾥是⼀个 navfoot.6bf68af7.css
延迟视⼝外的图⽚加载，这⾥列举了不必要加载的图⽚(和我上⽂提的优化建议⼀致，哈哈)
这项⾥⾯的内容指的是LightHouse发现的⼀些可以直接优化的点，你可以对应这些点来进⾏优化。

⼿动诊断项有6个建议：
最⼩化主线程⼯作
减少JavaScript执⾏时间
避免DOM太⼤
通过有效的缓存策略缓存⼀些静态资源
避免链接关键请求
保持低请求数量和⼩传输⼤⼩
这些项⽬表⽰LightHouse并不能替你决定当前是好是坏，但是把详情列出来，由你⼿动排查每个项⽬的情况
通过的审查项
这⾥列出的都是做的好的地⽅，本⽂例⼦共有16条，不过即使做的好，依然值得我们进去仔细看⼀下，因为像所有条⽬⼀样，这⾥的每个条⽬也有⼀个showmore，我们可以点进去仔细学习背后的知识和原理！
Accessibility辅助功能
辅助功能指的是那些可能超出"普通"⽤户范围之外的⽤户的体验，他们以不同于你期望的⽅式访问你的⽹页或进⾏交互，本⽂的例⼦建议如下图：
辅助功能类别测试屏幕阅读器的能⼒和其他辅助技术是否能在页⾯中正常⼯作。

例如：按元素来使⽤属性，标签使⽤是否规范，img 标签是否缺少 alt 属性，可辨别的元素命名等等。

这⼀项我们不展开讲，但是还是建议⼤家按照审计建议修改⼀下⽹页。

其他⼏项，本⽂的例⼦最佳实践评分挺⾼的，⽽例⼦不⽀持PWA，也不需要考虑SEO，这⾥就不展开说明了，有对应需求的可以⾃⼰详细看看即可。

总结
最后总结⼀下，我们利⽤Chrome Dev Tools 进⾏页⾯性能分析有以下指标可以参考：
从⽹络⾯板分析
从性能⾯板分析
从Memory⾯板等分析内存泄露
⽤Audits⼯具分析
⽽这些分析⽅法，本⽂都详细写了。

可以认真看看～
到此这篇关于利⽤ Chrome Dev Tools 进⾏页⾯性能分析的步骤说明(前端性能优化)的⽂章就介绍到这了,更多相关 Chrome Dev Tools 页⾯性能内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。