chrome devtools使用详解——Performance

本文是学习&研究笔记，如有错误还请指正！

相关文章

• Elements篇
• Sources篇

当页面卡顿、慢时可使用Performance来分析问题缘由所在。

面板

---

Performance，即运行时性能表现，面板以下：

使用

---

• 使用隐身窗口，打开项目（好比在线测试DEMO）
• 点击录制按钮（黑点），开始记录此段时间内页面运行性能
• 点击stop中止

面板功能分析

---

以下划分红4个区域

区域1：控制面板

• Screenshots 截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里）
  经过在时间线上移动观察页面的变化
• Memory 内存消耗记录：勾选后能够看到各类内存消耗曲线

【如下配置都是用来模拟手机、慢网络下使用的，无需能够跳过】

• Disable javaScript samples 关闭javaScript样本：减小在手机运行时的开销，模拟手机运行时勾选
• Network 网络模拟：能够模拟在3G,4G等网络条件下运行页面
• Enable advanced paint instrumentation(slow) 记录渲染事件的细节：选择frames中的一块，能够看到区域四多了个Layers

• CPU CPU限制：主要为了模拟底CPU下运行性能

区域2：概览面板（overview）

1 . FPS

FPS：每秒帧数，对于动画而言标准是保持在60FPS

☆ 优化

绿色越高越好，出现红色则表示FPS低（这就是你为啥以为页面卡顿了），你能够在区域三Frames中看到具体的FPS值（见下面第二图）。

☆ 测试

多点几回DEMO的 ADD 10 按钮，直到感受画面不流畅为止，开启分析记录，以下

点击方块能够看到57.1ms内共有18fps

2 . CPU

CPU: 处理各个任务花费的时间，选择一段CPU统计能够在区域四的Summary看到统计表格

• Scripting 脚本
• Rendering 渲染
• Painting 绘制
• Loading 加载
• ldle 闲置

☆ 优化

比重占的大的颜色可能有问题，如上图中的紫色部分Rendering，表示渲染耗费时间久

3 . NET

NET：各个请求花费时间 这块能够再network里看，更清晰些

区域3：线程面板

1 . Frames

Frames：帧线程，鼠标悬浮绿色块能够看到fps

2. Main

Main：主线程，负责执行Javascript, 解析HTML/CSS, 完成绘制。 能够看到主线程调用栈和耗时状况，每一个长条都是一个事件，悬浮能够看到耗时和事件名

• x轴指时间 最上面的第一条就是事件触发的地方，直到结束，这条线是最长的
• y轴指调用栈 上面的event调用了下面的子event，越到下面数量越少（瀑布）

颜色表明各个事件类型，如下列出一些常见的事件

3. Raster

Raster：Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板

统计面板选择因点击选择不一样的目标统计的内容不一样

• Summary 统计图：展现各个事件阶段耗费的时间

• Bottom-Up 排序：能够看到各个事件消耗时间排序 (1)self-time 指除去子事件这个事件自己消耗的时间 (2)total-time 这个事件从开始到结束消耗的时间（包含子事件）

• Call Tree 调用栈：Main选择一个事件，能够看到整个事件的调用栈（从最顶层到最底层，而不是只有当前事件）

• Event Log 事件日志 (1) 多了个start time，指事件在多少毫秒开始触发的 (2) 右边有事件描述信息

开启实时监控

1. 在控制ctrl+shift+p打开命令行
2. 搜索Show Rendering
3. 勾选FPS Meter

扩展：浏览器渲染过程

---

参考文档

segmentfault.com/a/119000001…

www.bubuko.com/infodetail-…

www.xue63.com/toutiaojy/2…

www.css88.com/doc/chrome-…

www.cnblogs.com/hellotyc/p/…

更多内容点这里： 官方文档