Chrome Dev Tools 性能分析&调试技巧

我们经常用Chrome Dev Tools 来开发调试，但其实只是用了他一点点的功能。Chrome Dev Tools绝对是前端性能优化中性能分析的一把利器，而这个功能因为大家平时也相对较少用到，今天就是想将用 Chrome Dev Tools 进行页面性能分析的技能分享给大家。希望大家能在优化自己项目性能的时候更得心应手

面板拆解

常用

Elements - 元素面板：可以自由的操作DOM和CSS
Console - 控制台面板：又称控制台，用以打印应用输出信息和输入需要被执行的代码。
Sources - 源代码面板：要用于查看 web 应用的资源列表和查看及调试js代码。
Network - 网络面板：页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2)、资源类型、资源大小、资源时间线等情况

可用于性能分析

Performance - 性能面板：页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等等信息
Memory - 内存面板 :可以记录某个时刻的页面内存情况，一般用于分析内存泄露
Layers - 展示页面中的分层情况

利用 Chrome Dev Tools 性能分析

准备工作

隐身模式打开chrome，排除一些插件等因素对页面性能情况的影响。
去掉页面缓存

了解performance各模块

录制一段时间
重启页面，录制整个页面加载的过程。比较常用
清除这一次性能录制的记录
上传页面性能录制的数据
下载页面性能录制的数据
多次录制时可选择要展示的性能记录
是否捕捉页面加载过程的截图
是否记录内存变化
垃圾回收，点击了即进行一次垃圾回收

体验同页面性能差异

Google 性能测试地址

googlechrome.github.io/devtools-sa…

可以选择降低4倍性能或6倍CPU性能，以便更好模拟低设备

进行性能分析

Network面板分析

优化点

图片较多情况下，使用http2，多路复用，加快资源加载
小的图片可以使用base42处理

Performance面板分析

录制一次页面加载过程，用于性能分析

不急，我们一步步看

performance面板有如下四个窗格：

控制按钮。
overview。页面性能的高级汇总（FPS:帧率，CPU:CPU占用，NET:网络请求）
火焰图（主要在Main中）
数据统计。以图表的形式汇总数据

来看一些重要的图表

1. Fps

fps：是指页面每秒帧数，是用来分析动画的一个主要性能指标
fps = 60 性能极佳
fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是24帧

蓝色标注出来的区域，就是FPS记录的信息

放大点看，FPS由两部分组成：

红色：意味着帧数已经下降到影响用户体验的程度，chrome帮忙标注了，这块有问题
绿色：其实就是Fps指数，所有绿色柱体高度越高，性能越好

FPS曲线有部分标红，说明页面存在部分渲染卡顿

屏幕快照区域将屏幕逐帧录制下来，可以帮助观察页面的状态，帮助分析首屏渲染速度。也可以帮助估算页面加载白屏时间。

通过观察发现引起fps下降的主要原因是图片的加载。整个渲染卡顿持续时间较长，但影响首屏渲染时间较短。

2. Cpu

Cpu资源这个区域指示消耗 CPU 资源的事件类型，各种颜色代表着在这个时间段内，CPU在各种资源处理上所花费的时间。

如果某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。

3. Frames

可以查看特定帧的fps，悬停查看数据，点击查看详细数据和关键帧的视图画像

16.24ms是一帧的时间间隔，即页面两次刷新之间间隔
duration代表当前帧从16.24ms开始等待，16.24ms+1.64s后进行了一次渲染
fps：1000ms/16.24ms = 60.9fps，约等于61fps

4. NetWork

每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）颜色表示： HTML 文件为蓝色，脚本为黄色，样式表为紫色，媒体文件为绿色，其他资源为灰色

5. 火焰图

在 Main 面板中，可以分析具体函数耗时

脑壳疼，我们缩小一下时间区间，放大了瞅一瞅

Main中展示的是火焰图，也就是函数调用的堆栈火焰图 x轴表示时间，最上面的第一条就是事件触发的地方，直到结束，这条线是最长的 y轴表示调用的函数，函数中还包含依次调用的函数，越到下面数量越少（瀑布）

不同颜色代表不同的事件类型，以下对常见的事件类型进行区分

Parse HTML（蓝色）: chrome 进行HTML解析

Event Script（橙色）: Javascript事件（例如 mousedown）

Layout（粉色）: 样式计算和布局，即重排

Recalculate style（粉色）: 样式计算和布局，即重排

Paint（绿色）: 合成的图层被绘制到显示画面的一个区域

Composite（绿色）: Chrome的渲染引擎合成了图像层

在火焰图中选择Task时，统计区域显示与事件相关的其他信息
Summary：统计报表，展示各个事件阶段耗费的时间。
Bottom-Up: 事件时长排序，可以看到各个事件消耗事件的排序。（self-time: 事件本身耗时。 total-time: 包含子事件，从开始到结束的耗时。）
Call-Tree: 调用栈，在Main选中一个事件，可以看到整个事件的调用栈（从最顶层到最底层，而不是只有当前事件）
Event Log: 事件日志。（多了一个start time, 指事件在多少毫秒开始触发。右边有事件描述信息）

Sumarry 统计图的颜色表示：

Loading: 网络通信和HTML解析

Scripting : JavaScript执行

Rendering : 样式计算和布局，即重排

Painting: 重绘

System: 其它事件花费的时间

Idle: 空闲时间

识别问题：红色三角号

面板中会有很多的 Task，如果是耗时长的 Task，其右上角会有红色三角号，这是chrome自动帮助识别出有问题的部分，图中没有，说明页面首屏的逻辑处理分配得还不错。点任一任务，都可在下面统计区域里看其具体的信息

影响性能的常见因素

【JS】JavaScript 计算，尤其是那些触发大量视觉变化的会降低应用性能。不要让时机不当或长时间运行的 JavaScript 影响用户交互

问题

例子

解决方案

大开销输入处理程序影响响应或动画

触摸，视觉滚动

让浏览器处理触摸和滚动，或者尽可能晚的绑定监听(see calendar.perfplanet.com/2013/the-ru…)

时机不当的 JavaScript程序影响响应、动画和加载

用户在页面加载后滚动，通过setTimeout/setInterval实现动画

developers.google.com/web/fundame… 使用requestAnimationFrame替代 setTimeout 或 setInterval

长时间运行的JavaScript影响响应

处理复杂数据

【样式】样式的变化代价很高，尤其是那些不止影响一个元素的DOM的变化。只要将样式应用到元素，浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制

以下这种就属于样式影响了性能

开发中尽量减少 Recalculate Style (重计算样式)的影响

学习链接

CSS Triggers ：学习哪些CSS属性分别会触发布局、重绘或者合成。这些属性会对渲染性能造成影响

避免大规模、复杂的布局

总结

希望大家学会看懂上面那些面后，能分分钟抓住影响页面性能的真凶！

灵魂拷问：有没有简单一点的性能分析方法呢？

Audits工具分析页面性能【全自动】

Audits通过一系列的规则来对网页进行评估分析，最终给出一份评估报告。

Audits主要从5个方面来给网页打分。在选择了要评估的选项后，点击 Run Audits ,将会得到一份报告。

额，有点惨。让我们看看报告都说了些什么

First Contentful Paint：内容首次开始绘制。
Time to Interactive：可互动时间，页面中的大多数网络资源完成加载并且CPU在很长一段时间都很空闲的所需的时间。此时可以预期cpu非常空闲，可以及时的处理用户的交互操作。
Speed Index：速度指标是一个页面加载性能指标，向你展示明显填充页面内容的速度，此指标的分数越低越好。
Total Blocking Time 累积阻塞时长，TBT越小说明页面能够更好的快速响应用户事件。
Largest Contentful Paint：最大内容渲染时间，可以代表当前页面主要内容展示的时间
Cumulative Layout Shift 累积布局变化量，CLS的分数越低，表明页面的布局稳定性越高，通常低于0.1表示页面稳定性良好。