Chrome Timeline 图解

4,610 阅读4分钟

链接:Performance Analysis Reference

工具栏介绍

: 点击开始录制

: 刷新页面,重新录制,会自动停止

: 删除

: 查看内存使用情况

: 强制进行垃圾回收

: 设置,点击该按钮,可以设置Disabled JavaScript samples等相关功能

: 设置网络

: 调节CPU性能(主要可以用来仿手机环境等)


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


Screenshot

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

开启Screens

关闭的情况下,则无

关闭Screenshot

Disabale Javascript samples

不勾选的情况下,main下面会显示调用的每个 JavaScript 函数

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

勾选的情况下,没有详细的函数调用情况

Enable advanced paint instrmentation(slow)

查看渲染情况;


概览栏

: 每秒帧数;绿色竖线越高,FPS越高。FPS图表上的红色表示长时间帧,很可能会出现卡顿。

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

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

: 每条彩色横杠表示一种资源;横杠越长,检索资源所需的时间越长。

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

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

查看Main块下的事件

选中对应的块,可以通过下面SummaryCall TreeBottom-upEvent 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中显示

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

其他 —— 分析绘制

  1. esc,click,选择rendering tab

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

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

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

    • 黄色边框:用于显示页面上的layer
    • 蓝色栅格线:表示的是分块,这些分块可以看作是比层更低一级的单位
    • 其他颜色的边框线,比如图片如果单独有个layer的话,边框线是蓝色的
  2. Scrolling Performance Issues分析鼠标滚动时的性能问题,会显示使屏幕滚动变慢的区域。

具体可以查看链接Chrome渲染分析之Rendering工具使用

移动时间轴

  1. 鼠标移动
  2. 使用ADWS,进行时间轴的调节

保存/导出

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

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

注意

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

备注: