Timeline
Timeline面板
Chrome开发者工具详解(3)-Timeline面板
注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享。。
更新时间:2016-10-24
Timeline面板
Timeline面板是整个面板里面最复杂的一个面板,涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。
概述
下图是从Google官方网站中介绍Timeline面板的图贴到这里,该面板主要包括4大块窗格(Pane):
- Controls 录制开关和控制录制过程中需要记录哪些信息。
- Overview 网页性能的概要信息。
- Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
- Details 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。
Flame Chart里面的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标记第一次的绘制时间点;红色代表load事件。
其中第2块Overview显示了网页性能相关的概要信息,可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息。
可以通过键盘上的
W
,S
来放大和缩小指定区域,通过A
,D
来向左或向右移动指定区域。
从Google把图贴到这里,这个窗格包含了三个图表:
- FPS 每秒帧数(Frames Per Second)。绿色柱状条越高,则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
- CPU 标记CPU资源的使用情况,这里的面积图标记着消耗CPU资源的各类事件。
- 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开发者文档有最权威最新的信息。
参考文档
个人博客
Timeline的更多相关文章
- Chrome Developer Tools:Timeline Panel说明
一.Timeline panel 概况 Timeline工具栏可以详细检测出Web应用在加载过程中,时间花费情况的概览.这些应用包括下载资源,处理DOM事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...
- Chrome 开发工具之Timeline
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...
- iOS之TimeLine(时间轴)的实现
这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...
- 如何使用Goolge Timeline工具
网上中文的资料版本比较老,找到一个新版本的英文介绍,翻一下,原文:https://developers.google.com/web/tools/chrome-devtools/profile/eva ...
- 【三石jQuery视频教程】03.创建垂直时间表(Timeline)
视频地址:http://v.qq.com/page/g/i/o/g0150rvi6io.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- WPF中的动画——(三)时间线(TimeLine)
WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...
- 如何使用Chrome Timeline 工具(译)
[原文地址]https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline- ...
- 分享最新的博客到LinkedIn Timeline
使用Octopress作为我的博客框架有两年了.使用起来一直很顺手,这个工具真正的把博客跟写代码等同起来,非常酷炫.再加上各种各样的定制化,简直是随心所欲.我针对自己的需求对Octopress框架进行 ...
- chrome dev debug network 的timeline说明
在使用chrome的时候F12的开发者工具中有个network,其中对每个请求有个timeline的说明,当鼠标放上去会有下面的显示: 这里面的几个指标在说明在chrome使用文档有说明: 下面我用人 ...
- Chrome开发者工具详解(3)-Timeline面板
Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...
随机推荐
- flex数据交互方式 转
Flex数据交互方法- httpservice, webservice, RemoteObject, socket. 写在前面: 使用SOAP Web Service同Flex交互有很多好处,但是它很 ...
- [改善Java代码]在明确的场景下,为集合指定初始容量
我们经常使用ArrayList,Vector,Hashmap等集合,一般都是直接用new跟上类名声明出一个集合来,然后使用add,remove,等方法进行操作,而且因为它们是自动管理长度的,所以不用我 ...
- 第四篇、CocoaPods 镜像的更新 原来的淘宝镜像已经不再更新
在开发应用,我们常常使用cocoaPods来管理第三方框架,但是原来的淘宝的镜像不更新了 新的镜像地址:https://gems.ruby-china.org/
- 3月31日学习笔记(HTML基础)
HTML标签和元素概念区别 <p>是标签,<p>内容</p>是HTML元素. <pre></pre>定义预格式化文本,多用来显示源代码. 表 ...
- jvmstat监控jvm内存
1.下载jvmstat-3_0.zip: 2.配置环境变量JVMSTAT_JAVA_HOME为jdk目录E:\Program Files\Java\jdk1.5.0_12 3.监控本机: jps查看 ...
- flex&bison 1
. {ECHO;}-----单独的flex使用中有效 . { yyerror();}--------flex和bison交叉使用,即使不调用yyerror函数,也会报错的 error: syn ...
- extends 与 implements 的区别
extends与implements是Java继承中使用的两个关键字,但extends与implements使用的情景不同: 1.接口继承接口,使用extends 2.类继承类时,用extends 3 ...
- DEDECMS中,自增长标签
自增长 arclist 标签下使用 [field:global.autoindex/] 默认从1开始 channel 标签下使用 [field:global.autoindex/] 默认从0开始 ch ...
- [DevExpress]GridControl 同步列头checkbox与列中checkbox状态
关键代码: /// <summary> /// 同步列头checkbox与列中checkbox状态 /// </summary> /// <param name=&quo ...
- HTML5新增标签的汇总与详解
趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...