Chrome Timeline 图解

连接：Performance Analysis Reference

工具栏介绍

: 点击开始录制

: 刷新页面，从新录制，会自动中止

: 删除

: 查看内存使用状况

: 强制进行垃圾回收

: 设置，点击该按钮，能够设置Disabled JavaScript samples等相关功能

: 设置网络

: 调节CPU性能（主要能够用来仿手机环境等）

其他在下面章节中会介绍到

Screenshot

开启的状况下，Frame标签下会有屏幕当前屏幕的截图

关闭的状况下，则无

Disabale Javascript samples

不勾选的状况下，main下面会显示调用的每一个 JavaScript 函数

该图显示了DomContentLoaded事件触发后，调用了Function Call; Function Call 往下又调用了e()...，依次类推（Timeline事件参考）

勾选的状况下，没有详细的函数调用状况

Enable advanced paint instrmentation(slow)

查看渲染状况；

概览栏

： 每秒帧数；绿色竖线越高，FPS越高。FPS图表上的红色表示长时间帧，极可能会出现卡顿。

例以下图，咱们能够移动概况栏，将时间轴集中到红色块附件，发现Layout等右上角有红色小块，点击这些事件，Summary下会显示对应的事件以及对应的代码位置。

： CPU资源，此面积表示消耗CPU资源的事件类型。

： 每条彩色横杠表示一种资源；横杠越长，检索资源所需的时间越长。

每一个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

深色部分表示传输时间（下载第一个和最后一个字节之间的时间）

查看Main块下的事件

选中对应的块，能够经过下面Summary、Call Tree、Bottom-up、Event Log查看详情

• Call Tree查看函数调用
  
  
  

  • slef time：当前函数调用花费的时间

  • total time：表示其与其子函数总花费的时间

  • filter：筛选

  • grouping：根据条件对活动表进行排序。

  • Show Heaviest Stack: 显示所选活动哪些子函数执行时间最长

• Bottom-up 查看哪些函数调用时间最长
  
  
  

  • slef time 当前函数调用花费的时间
  • total time 表示其与其子函数总花费的时间

• Event Log 按录制时的顺序查看事件
  
  
  

  • Duration： 按花费时间进行筛选

查看其它

1. GPU
2. Raster(光栅)
3. interactions： 查看用户交互
4. network

• 色块介绍
  • HTML 文件为蓝色。
  • JS为黄色。
  • CSS为紫色。
  • Images为绿色。
  • 其余资源为灰色。
• 优先级
  左上角蓝色越深，优先级越高

• 与network栏的对应关系
  • 左边的线：request send前
  • 浅色块： request send 和tftb
  • 深色块： content download
  • 右边线： 等待主线程时间，不在Timing中显示

5. 查看特定块消耗的时间 按住shift，单击鼠标进行选择块，查看该段消耗的时间

其余 —— 分析绘制

1. 按esc，click,选择rendering tab

2. 打开FPS meter,实时显示当前页面的FPS，帧数越高，动画显示的越流畅。

3. Paint flashing, 实时显示浏览器绘制，重绘时，会显示绿色的边框

4. Layer Borders显示层的组合边界

   • 黄色边框：用于显示页面上的layer
   • 蓝色栅格线：表示的是分块，这些分块能够看做是比层更低一级的单位
   • 其余颜色的边框线，好比图片若是单独有个layer的话，边框线是蓝色的

5. Scrolling Performance Issues分析鼠标滚动时的性能问题，会显示使屏幕滚动变慢的区域。

具体能够查看连接Chrome渲染分析之Rendering工具使用

移动时间轴

1. 鼠标移动
2. 使用A、D、W、S，进行时间轴的调节

保存/导出

右键点击Save profile便可下载当前的性能分析视图

点击Load profile便可载入上次的视图，进行分析

注意

• 尽量保持记录简短。简短的记录一般会让分析更容易。
• 避免没必要要的操做。避免与您想要记录和分析的活动无关联的操做（鼠标点击、网络加载，等等）。例如，若是您想要记录点击 Login 按钮后发生的事件，请不要滚动页面、加载图像，等等。
• 停用浏览器缓存。记录网络操做时，最好从 DevTools 的 Settings 面板或 Network conditions 抽屉式导航栏停用浏览器的缓存。
• 停用扩展程序。Chrome 扩展程序会给应用的 Timeline 记录增长不相关的噪声。 以隐身模式打开 Chrome 窗口或者建立新的 Chrome 用户我的资料，确保您的环境中没有扩展程序。

备注：

• Timeline 事件参考
• Optimize Website Speed With Chrome DevTools
• Chrome渲染分析之Rendering工具使用