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样式效果,可能的媒体类型选项有printscreen

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

查询指定事件

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

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

运行时性能分析

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

参考文档

个人博客

我的个人博客

Timeline的更多相关文章

  1. Chrome Developer Tools:Timeline Panel说明

    一.Timeline panel 概况 Timeline工具栏可以详细检测出Web应用在加载过程中,时间花费情况的概览.这些应用包括下载资源,处理DOM事件, 页面布局渲染或者向屏幕绘制元素. 如下图 ...

  2. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  3. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  4. 如何使用Goolge Timeline工具

    网上中文的资料版本比较老,找到一个新版本的英文介绍,翻一下,原文:https://developers.google.com/web/tools/chrome-devtools/profile/eva ...

  5. 【三石jQuery视频教程】03.创建垂直时间表(Timeline)

    视频地址:http://v.qq.com/page/g/i/o/g0150rvi6io.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  6. WPF中的动画——(三)时间线(TimeLine)

    WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...

  7. 如何使用Chrome Timeline 工具(译)

    [原文地址]https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline- ...

  8. 分享最新的博客到LinkedIn Timeline

    使用Octopress作为我的博客框架有两年了.使用起来一直很顺手,这个工具真正的把博客跟写代码等同起来,非常酷炫.再加上各种各样的定制化,简直是随心所欲.我针对自己的需求对Octopress框架进行 ...

  9. chrome dev debug network 的timeline说明

    在使用chrome的时候F12的开发者工具中有个network,其中对每个请求有个timeline的说明,当鼠标放上去会有下面的显示: 这里面的几个指标在说明在chrome使用文档有说明: 下面我用人 ...

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

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

随机推荐

  1. centos6.4搭建lnmp服务(转载)

    1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport 8 ...

  2. Windows 8.1 归档 —— Step 3 软件的选择与安装

    这里我将列举出一些 Windows 8.1 下实用的软件 --运行库-- 用精简版系统或者绿色版软件时,使用软件经常遇见的情况是“由于应用程序配置不正确,应用程序未能启动”,提示缺少dll文件等.大部 ...

  3. listagg( ) within group ( order by ) 与 wm_concat

    listagg( ) within group ( order by ) 与 wm_concat --oracle 11g 及以后适合 最好 select spbywslid,listagg(xm,' ...

  4. Sublime text3 安装

    Sublime是一款跨平台的前端开发神器,国外的一款共享软件,虽然是未注册的但不影响使用. 一.下载最新版的安装包 官网地址:http://www.sublimetext.com/3 --portab ...

  5. Math.random获得随机数

    function GetRandomNum(Min,Max){           var Range = Max - Min;           var Rand = Math.random(); ...

  6. CSS3 垂直树状图——运用 :before 和 :after

    直接上图(原网址),还有步骤想详解视频.自己CSS3练习demo. [demo] [HTML] <div class="tree"> <ul> <li ...

  7. 【Knockout】五、创建自定义绑定

    概述 除了上一篇列出的KO内置的绑定类型(如value.text等),你也可以创建自定义绑定. 注册你的binding handler ko.bindingHandlers.yourBindingNa ...

  8. 程序生成SiteMapPath文件

    //创建站点地图 private void CreateSiteMap(DataSet ds) { XmlDeclaration declareation; declareation = xmlDoc ...

  9. JavaScript设置cookie

    在做网站的时候会用到JS操作cookie,现在写下来,算是对自己工作的一次小小总结,后面用到的时候就不用再写一遍了,高手就不用看了. /* 添加cookie 参数:cookie名,cookie值,过期 ...

  10. Android adb常见问题整理(转)

    原文地址:http://blog.csdn.net/androiddevelop/article/details/8130416 以下都是ADB连接问题,可以通过尝试如下步骤,由简单度排序 1. 插拔 ...