Skip to content

Latest commit

 

History

History
471 lines (425 loc) · 14.8 KB

performance-panel-usage.md

File metadata and controls

471 lines (425 loc) · 14.8 KB

DevTools Performance 使用手册

一. 控制条和设置项

控制条

  • 录制：加载时、运行时 （注意：录制时长）
  • 导入、导出
  • 屏幕截图

设置项

  • 禁用JS采样：当在移动设备上运行时，可以禁止，以减少开销
  • 启用高级绘制分析：当确定绘制是瓶颈时，再开启（否则它引入的性能开销，会影响数据）
  • 网络节流
  • CPU节流

二. Overview 概览

操作 选中
  • 鼠标拖拽，选中感兴趣的某段
  • 左键单击，选中细条
缩放
  • 移动手柄：鼠标 hover 至手柄顶部粗条处，变手型时即可移动
  • 滚动鼠标滚轮，hover 在 Overview 或 Section 区域
    一般情况：先用鼠标点击感兴趣的位置，再缩放
    （～滚动时，按Shift试试。看啥反应～）
平移
  • 鼠标，移动到手柄处，变成手型，移动
  • 鼠标，按住 shift，滚动鼠标滚轮
  • 触摸板，直接滑动
看截屏
  • hover上，看大图
  • hover＋平移，大图幻灯片播放
关注点 FPS
  • 一般情况，绿条越高，FPS就越高
  • 上方红条：帧率低到已经影响到用户体验了
CPU
  • 如果充满了某个颜色，说明彼时CPU被大量占用
  • 如果CPU被长时间占用，说明有地方需要优化
三竖线
  • 绿线：首次绘制的时间
  • 蓝线：DOMContentLoaded 事件触发的时间
  • 红线：Load 事件触发的时间

DOMContentLoaded 和 load 事件

DOMContentLoaded when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading 可以访问DOM
load when a resource and its dependent resources have finished loading. 完全加载完毕

三. Network

X轴 line-bar（时间） 灰色线（左） Queued／Stalled 若太长，说明排队等待的时间过程
透明条 TTFB 若太长，说明网慢／服务器本身响应慢
深色条 下载内容 若太长，说明文件内容大
灰色线（右） 等待主线程的时间 （ Network / Timing 里未显示）
Y轴 资源（可并行）
  • 蓝色：HTML
  • 黄色：JS
  • 紫色：CSS
  • 绿色：Img
  • 灰色：其它资源，eg.jsonp
操作 X轴 可缩放，鼠标滚轮
Y轴 可上下滚动，鼠标滚轮＋Shift ／ 点击拖拽滚动条
整体 可平移，同 Overview
点击资源条
  • Summary，查看详情
  • Buttom-Up / Call Tree / Event Log 则显示该资源时间周期期间发生的活动

Network / Timing

Resource Scheduling Queueing 请求正在排队。有以下几种原因：
  • 有更高优先级的请求
  • 已经有6个 TCP 连接了（ 仅适用 HTTP/1.0 和 HTTP1.1 ）
  • 浏览器正在分配磁盘缓存（通常非常迅速）
Connection Start Stalled 停滞。由于 Queueing 中列的任何原因而暂停
DNS Lookup DNS 查找。浏览器正在解析请求的 IP 地址
Proxy Negotiation 代理协商。浏览器正在与代理服务器协商请求
Initial Connection 建立连接。包括 TCP 握手/重试和协商 SSL 的时间
SSL 完成 SSL 握手
ServiceWorker Preparation sw 准备。浏览器正在启动 sw
Request/Response Request to ServiceWorker 请求 sw。该请求正在被发送给 sw
Request Sent 请求发送。请求正在发送，通常不到1ms
Waiting (TTFB) 浏览器正在等待响应的第一个字节，Time To First Byte
该时间包括一次往返延迟和服务器准备响应的时间
Content Download 浏览器正在接收响应
Receiving Push 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
Reading Push 浏览器正在读取以前收到的本地数据

四. Main

火焰图：记录主线程上的活动

介绍 x轴 记录时间 每个 bar 代表一个事件，越宽代表事件花费的时间越长
y轴 调用堆栈 多个事件彼此堆叠，上面的调了下面的／父子函数
颜色
  • 蓝色：加载活动，Request、Response、Parse HTML
  • 紫色：渲染活动，Recalculate Style、Layout、Update Layer Tree
  • 绿色：绘制活动，Paint、Composite Layers
  • 深黄色：脚本活动
  • 其它随机色：调用栈里的JS颜色
（颜色可参考底部的 Summary、Event Log 里显示的）
操作 查看详情 点击事件，看 Summary
（点击Main的空白处，Summary 回到显示 Overview 中选中的全局态）
顺序预览 选中一个事件后，上下左右箭头
查找 cmd+F，搜索事件／也可输入正则（Cancel 退出）
隐藏详细调用栈 Disable JavaScript samples，选中只看顶级事件
关注 红三角 事件右上角的红三角：警告，占用主线程时间太长了
太宽的事件 条越宽，代表执行时间很长
其它视角
  • Bottom-Up：开销大的函数
  • Call Tree：导致最多活动的根活动
  • Event Log：按时间顺序排列

Main 里的 Activity

Parse HTML 构建 DOM
Evaluate Script 执行 JS
Parse Stylesheet 构建 CSSOM
Recalculate Style 构建 RenderTree
Layout 布局／自动重排
  • Layout: Chrome IE Safari
  • Reflow: FF
Paint 绘制／栅格化 Paint／Raster
Composite Layers 合成

五. Summary：Main 中 Activity 的关键字段

在主进程上执行的任务，Summary 里的字段会据任务的不同而不同。此处列出部分活动里的关键字段。

以下的链接均为空，旨在表示：在面板里点击该链接，会打开特定文件或直接定位到具体代码行

公共字段有：

字段 值（示例） 说明
Total Time 0
Self Time 0
Pending for 0.0 ms
Initiator reveal
First Invalidated   第一次触发的地方
Aggregated Time  

不同的任务，又有各自的详情字段。下面按照功能，将这些任务分为特定组来介绍。

网络 相关的活动

  1. Send Request
  2. Receive Response
  3. Receive Data {n}
  4. Finish Loading
对象 字段 值（示例） 说明
Send Request Resource www.so.com/
  Request Method GET
          Priority       Highest
  Preview   若是图片，则有预览
Receive Response
Receive Data
Finish Loading		 Resource www.so.com/
  Encoded Data 65536 Bytes 若是.html，则收到第一个
Receive Data 就可以
开始 Parse HTML 了
  First Invalidated pull @ :formatted:12520
Receive Response Status Code 200
  MIME Type text/html
Finish Loading   Decoded Body 78782 Bytes 值是n次Receive Data
的Encoded Data之和

HTML／CSS／JS 相关的活动

  1. Parse HTML
  2. Parse Stylesheet
  3. Evaluate Script
对象 字段 值（示例） 说明
Parse HTML Range - (index):0 [0…89]
- (index):90 [90…98]
- (index):99 [99…113]
- (index):114 [114…120]
- (index):121 [121…-1]
 开始



结束
Evaluate Script Script           (index):21

渲染 相关的活动

  1. Recalculate Style
  2. Layout
  3. Update Layer Tree
  4. Paint
  5. Composite Layers
对象 字段 值（示例） 说明
Recalculate Style Elements Affected 720
  First Invalidated - setPlatform
- addClass @ (index):115
- style @ :formatted:8712
Layout           Nodes That Need Layout 958 of 958
  Layout root #document
  First Layout Invalidation - style @ [:formatted:8712]
-(anonymous) @ (index):115
Paint Location (0, 0)
  Dimensions 1280 × 1846
  Layer Root #document

Event 相关的活动

Type 有以下几种：

  • beforeunload
  • readystatechange {n}
  • DOMContentLoaded {n}
  • load
  • pageshow
  • pagehide
  • visibilitychange
  • webkitvisibilitychange
  • unload
  • readystatechange
  • load
  • scroll
  • ...

load 的触发时机：任何资源加载完后，都会触发，eg .html/js/css/png/jpg/...

其他活动

  • XHR Load
  • Timer Fired
  • Major GC
  • Minor GC
  • DOM GC
  • ...
对象 字段 值（示例） 说明
Timer Fired Timer ID 6
  Timer Installed checkForLoad @ :formatted:1
Major GC Collected 0 B
DOM GC Details - collect
- idle sweep