如何使用Chrome Timeline 工具

Posted 2023-05-08

可以先熟悉一下界面工具的功能及使用：

打开chrome开发者工具，切换到Timeline选项卡；

Timeline工具里面使用是4种颜色来表示不同类别的事件：

蓝色：加载；

黄色：脚本；

紫色：渲染；

绿色：绘制

过滤面板可以对不同类型的事件和花费时间进行过滤，非常好用；

事件模式

在这个模式中，Summary视图(在Timeline的顶部)显示了一些水平的栅栏，分别代表页面中的网络和HTML解析(蓝色)，JavaScript(黄色)，渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件，是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的；

我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围；

在DETAILS面板中可以查看该记录范围内各类型事件的时间开销；

other表示其它事件花费的时间，Idle表示空闲时间 ，也可以在DETAILS面板中查看单个记录的时间开销；

名词解释：

send request 发送请求 evaluate script 评估脚本 parse html 解析html recalculate style 重新计算显示样式

layout 计算布局 paint setup 绘制设置【准备绘制】 paint 绘制 composite layers 组合层

timer fired 触发定时器 function call 函数调用 receive data 接收数据 receive response 接收响应

finish loading 结束加载 GC event 浏览器垃圾回收 pevaluate script 评估脚本 rasterize 光栅化

帧模式：

帧模式能让我们深入的了解页面的渲染性能，“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作，如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制；

目前大多数的显示器的刷新频率是60Hz，那么我们页面的绘制频率能达到60帧每秒是最好的，因为软件帧和硬件的刷新频率一致的话，页面能给人非常流畅的感觉，否则就会感觉到很卡，这样我们大概有16.6ms（1000/60）来完成每一帧的呈现，这就是很多人说的 “16.6ms”优化 ；

灰色的区域有点难理解，你可以理解是浏览器内部c++的一些工作，这部分可能和前端的js以及渲染没什么关系；

选择一个帧范围可以查看这个范围内帧的一些数据；

内存模式：

内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存，你可以查看每个时间段的内存使用量，并找出性能问题。

参考技术A 这个工具真的很强大，Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。
强烈建议在浏览器隐身模式下使用这个工具，并且禁用一切无关的插件，因为这些插件会影响测试的结果。
参考文献 http://www.tuicool.com/articles/bQvaUjn

Timeline

Chrome开发者工具详解(3)-Timeline面板

注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。

更新时间：2016-10-24

Timeline面板

Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。

概述

下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：

1. Controls 录制开关和控制录制过程中需要记录哪些信息。
2. Overview 网页性能的概要信息。
3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
4. Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。

Flame Chart里面的虚竖线含义：蓝色标记DOMContentLoaded事件；绿色标记第一次的绘制时间点；红色代表load事件。

其中第2块Overview显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，Flame Chart会跟着局部放大显示指定区域内的详情信息。

可以通过键盘上的W,S来放大和缩小指定区域，通过A,D来向左或向右移动指定区域。

从Google把图贴到这里，这个窗格包含了三个图表：

1. FPS 每秒帧数(Frames Per Second)。绿色柱状条越高，则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
2. CPU 标记CPU资源的使用情况，这里的面积图标记着消耗CPU资源的各类事件。
3. NET 各种颜色的柱状条分别显示一种资源。柱状条越长，代表获取这个资源的时间越长。

CPU面积图中各颜色的含义：蓝色代表HTML文件；黄色代表脚本文件；紫色代表样式文件；绿色代表媒体文件；灰色代表其它杂项文件。

NET图表柱状条两种颜色的含义：较亮的部分表示等待时间（当资源被请求时，直到第一个字节被下载的时间)；较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

网页录制详情

支持两种网页录制操作：①录制网页加载，②录制网页交互。为了便于分析，录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

当录制完成后，在Flame Chart(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看Timeline Event Reference这个参考文档。

录制中进行JS分析

在录制之前点击Controls中的JS Profile复选框，可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗)，并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

录制中捕获截屏

在录制之前点击Controls中的Screenshots复选框，可以在录制过程中捕获截屏，鼠标在Overview上从左向右移动则可以看到录制的动画。

绘制解析

在录制之前点击Controls中的Paint复选框，可以获取绘制事件的更多细节信息（注意这会产生很多的性能消耗）。如果要深入了解网页渲染方面的信息，可以点击DevTools右上角的菜单，在More tools里面选中Rendering settings，这里面包含了如下设置项：

• Paint Flashing 高亮显示网页中需要被重绘的部分。
• Layer Borders 显示Layer边界。
• FPS Meter 每一秒的帧细节，帧速率的分布信息和GPU的内存使用情况。
• Scrolling Performance Issues 分析鼠标滚动时的性能问题，会显示使屏幕滚动变慢的区域。
• Emulate CSS Media 仿真CSS媒体类型，查看不同的设备上CSS样式效果，可能的媒体类型选项有print、screen。

把上面的所有设置项勾选上，网页的显示效果如下：

查询指定事件

你可以通过在DevTools上按Cmd+F(Mac)调出查询框，来查看指定时间区域范围内的指定类型的事件，点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。

图中查询到了4个红色标记着的Parse HTML事件，点击Cmd+G焦点会在这4个事件移动。

运行时性能分析

上面大致介绍了Timeline面板上的各个功能菜单，那么如何去利用该面板去分析和优化网页程序的运行性能呢，由于篇幅限制，就不在这边展开讨论，感兴趣的读者直接到Google开发者文档上查看，Google开发者文档有最权威最新的信息。

参考文档

• Analyze Runtime Performance
• Diagnose Forced Synchronous Layouts

个人博客

我的个人博客