chrome devtools使用详解——Performance

19,074 阅读3分钟

本文是学习&研究笔记,若有错误还请指正!

相关文章

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

面板


Performance,即运行时性能表现,面板如下:

Performance 面板

使用


  • 使用隐身窗口,打开项目(比如在线测试DEMO
  • 点击录制按钮(黑点),开始记录此段时间内页面运行性能
  • 点击stop停止

演示

面板功能分析


如下划分成4个区域

image.png

区域1:控制面板

  • Screenshots 截图:默认勾选,每一帧都会截图。关闭后区域二下面部分会去除(下图红框标记那里)
    Screenshots
    通过在时间线上移动观察页面的变化
  • Memory 内存消耗记录:勾选后可以看到各种内存消耗曲线
    Memory

【以下配置都是用来模拟手机、慢网络下使用的,无需可以跳过】

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

区域2:概览面板(overview)

区域2

1 . FPS

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

优化

绿色越高越好,出现红色则表示FPS低(这就是你为啥觉得页面卡顿了),你可以在区域三Frames中看到具体的FPS值(见下面第二图)。

测试

多点几次DEMO的 ADD 10 按钮,直到感觉画面不流畅为止,开启分析记录,如下

FPS低
点击方块可以看到57.1ms内共有18fps
FPS值

2 . CPU

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

Summary统计

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

优化

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

3 . NET

NET:各个请求花费时间 这块可以再network里看,更清晰些

NET

区域3:线程面板

区域3

1 . Frames

Frames:帧线程,鼠标悬浮绿色块可以看到fps

2. Main

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

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

主线程

颜色代表各个事件类型,以下列出一些常见的事件

事件类型

3. Raster

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

Raster

区域4:统计面板

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

统计面板

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

  • Bottom-Up 排序:可以看到各个事件消耗时间排序 (1)self-time 指除去子事件这个事件本身消耗的时间 (2)total-time 这个事件从开始到结束消耗的时间(包含子事件)

  • Call Tree 调用栈:Main选择一个事件,可以看到整个事件的调用栈(从最顶层到最底层,而不是只有当前事件)

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

开启实时监控

image.png

  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/…

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