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

前端知识库
8,943 阅读11分钟

我们经常用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各模块

  1. 录制一段时间

  2. 重启页面，录制整个页面加载的过程。比较常用

  3. 清除这一次性能录制的记录

  4. 上传页面性能录制的数据

  5. 下载页面性能录制的数据

  6. 多次录制时可选择要展示的性能记录

  7. 是否捕捉页面加载过程的截图

  8. 是否记录内存变化

  9. 垃圾回收，点击了即进行一次垃圾回收

体验同页面性能差异

Google 性能测试地址

googlechrome.github.io/devtools-sa…

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

进行性能分析

Network面板分析

优化点

  • 图片较多情况下，使用http2，多路复用，加快资源加载

  • 小的图片可以使用base42处理

Performance面板分析

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

不急，我们一步步看

performance面板有如下四个窗格：

  1. 控制按钮。

  2. overview。页面性能的高级汇总（FPS:帧率，CPU:CPU占用，NET:网络请求）

  3. 火焰图（主要在Main中）

  4. 数据统计。以图表的形式汇总数据

来看一些重要的图表

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表示页面稳定性良好。

性能指标优化，每一项都可以展开来看明细解释

  • Opportunities 可优化项

  1. 减少JavaScript执行时间

  2. 使用适当大小的图片

  3. 预加载最大绘制图片

  4. 延迟会阻塞渲染的资源加载

  5. 减少css执行时间

  6. 使用 HTTP/2

  7. 提前建立连接

  • Diagnostics 手动诊断项

  • Passed audits 通过的审查项

其他几项有兴趣可以去了解一下

常用的Chrome 调试技巧

常用命令和调试

1. 呼出快捷指令面板：command + shift + p

控制面板 => command + shift + p 呼出快捷指令面板，在栏中键入要查找的命令或输入"?"号以查看所有可用命令。

2. 隐藏某个节点

选中节点，直接按键盘 H 可以直接让元素显示 / 隐藏，不用手动敲样式，效果等同 visibility: hidden，要占据盒模型空间

控制面板 => Elements => 按H + 点击要展开的元素图标

3. 展开所有的子节点

在进行DOM节点元素调试的时候，我们需要对每个节点进行展开查看，如果只是逐个点击目标元素下面的子元素展开，耗费时间。可以尝试下面的快捷操作～

控制面板 => Elements => 按option + 点击要展开的元素图标

4. 滚动元素到视图

在调试DOM元素的时候，我们已经聚焦到相关的DOM结构上了，但是对应的元素并没有在可视窗口上展示，那么我们可以将其快速滚动到可视窗口。

控制面板 => Elements => 右击选中的DOM节点 => Scroll into view

5. 预设设备

在进行调试的时候，我们手头上没有那么多设备，或者没有那么极端尺寸的设备。嗯，大家都懂得。我们只能靠调试工具进行模拟。可以自定义需要的设备。

控制面板 => setting图标 => Devices => Add custom device...

6. 预设网络状况

我们要考虑到不同网络下请求、提示、页面展示的状况。除了用charles模拟弱网，我们也可以用Chrome自定义网络的状况，而且不影响其他页面我们。

控制面板 => setting图标 => Throttling => Add custom profile...

7. 捕获快照

常常用到一般使用聊天工具就可以截图。弊端是不够通用，无法支持长图。用Chrome可以做到灵活截图

捕获全屏快照

控制面板 => command + shift + p => capture full size screenshot

捕获局部快照

控制面板 => 审查元素 => command + shift + p => capture node screenshot

捕获自定义快照

控制面板 => 审查元素 => command + shift + p => capture area screenshot

捕获当前屏幕快照

控制面板 => 审查元素 => command + shift + p => capture screenshot

8. 自定义代码片段 Snippets

在chrome里保存及运行一段js代码的功能，用来搭配直接修改js进行调试。比如黑夜模式调试。缺点：刷新不保存（不算缺点，算特性）

控制面板 - Sources Snippets

9.

完美解决修改了东西后一刷新什么都没了的尴尬。用法很多，有待开发

控制面板 - Sources overrides

10. 花式console

  1. 状态打印

  1. 打印表格：console.table()

适用于打印数组和对象

  1. 给console 编组：console.group()

  1. 测试执行效率：console.time()

  1. 打印对象

不仅仅打印变量，而是要打印对象。用大括号({})将变量包围起来。这样的优点是不仅会把变量的值打印，同时还会将变量名打印出来。

11. Preserve Log

在我们调试页面时，经常遇到页面跳转或刷新的情况，此时打印的输出会被刷新掉😭，看不到想要的数据。点击最右边的齿轮，有 Preserve Log选项，可以保存上一次打印的输出

avatar
文章
阅读
粉丝