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

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

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开发者文档有最权威最新的信息。

参考文档

个人博客

我的个人博客

Chrome开发者工具详解(3)-Timeline面板的更多相关文章

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

    摘自: http://www.cnblogs.com/charliechu/p/5992177.html

  2. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  3. Chrome开发者工具详解(2)-Network面板

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

  4. 四、Chrome开发者工具详解(4)-Profiles面板

    摘自: http://www.cnblogs.com/charliechu/p/6003713.html

  5. 二、Chrome开发者工具详解(2)-Network面板

    摘自: http://www.cnblogs.com/charliechu/p/5981346.html

  6. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  7. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  8. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  9. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

随机推荐

  1. 微软正式发布Visual Studio 2013 Update 3 (2013.3) RTM

    昨天微软的Visual Studio 2013 Update 3(Visual Studio 2013.3)正式发布(RTM)了,做为微软认证金牌合作的葡萄城控件,我们组织力量第一时间进行翻译.分享给 ...

  2. [.net 面向对象程序设计进阶] (3) 正则表达式 (二) 高级应用

    [.net 面向对象程序设计进阶] (2) 正则表达式 (二)  高级应用 上一节我们说到了C#使用正则表达式的几种方法(Replace,Match,Matches,IsMatch,Split等),还 ...

  3. MySQL--将MySQL数据导入到SQL Server

    随着时代的进步,社会的发展,各种技术层出不穷五花八门乱七八糟数不胜数(写作文呢!!!) 不扯废话,简单而言,很多公司都会同时使用多种数据库,因此数据在不同数据库之间导入导出就成为一个让人蛋疼的问题,对 ...

  4. js实现DOM结构

    /* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...

  5. html嵌套MP4、PDF的简单方案

    你需要一个jquery.media插件,http://malsup.com/jquery/media/ 然后: <html><head><script src=" ...

  6. UWP入门教程1——UWP的前世今生

    目录 引言 设备族群 UI 和通用输入模式 通用控件和布局面板 工具 自适应扩展 通用输入处理 引言 在本篇文章中,可以掌握以下知识: 设备族群,如何决定目标设备 新的UI控件和新面板帮助你适应不同的 ...

  7. Sizeof的计算看内存分配

    本文记录了有关sizeof的一些计算,主要有下面的四种情况:(如有错误,敬请留言) 使用sizeof()计算普通变量所占用的内存空间 sizeof计算类对象所占用空间的大小-用到了字节对齐 sixeo ...

  8. javascript_core_01之数据类型与运算

    1.数据类型转换: ①隐式转换:程序根据需要,自动转化数据类型: ②强制转换:主动调用函数执行转换: 2.字符串强制转换: ①x.toString():不能转换null和undefined: ②Str ...

  9. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  10. 理解与模拟一个简单web服务器

    先简单说下几个概念,根据自己的理解,不正确请见谅. web服务器 首先要知道什么是web服务器,简单说web服务器就是可以使用HTTP传输协议与客户端进行通信的服务器.最初的web服务器只能用来处理静 ...