谷歌浏览器的timeline工具的使用

转载 2017年10月13日 14:02:43
谷歌浏览器Timeline用法详解:
大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器。
点击F12会弹出一个界面,顶部带有功能的选项卡,其中有几个功能强大,但是相对较为复杂,比如Timeline,console和network。
(1).关于console的使用可以参阅谷歌控制台console相关命令介绍一章节。
(2).关于network的使用可以参阅谷歌浏览器network用法详解一章节。
近期发现一片介绍关于Timeline用法的文章,下面和大家做一下分享,下面进入正题。
一.简单介绍:
Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件,框架,和实时内存用量3个方面的数据来监测网页,通过这些数据,我们可以方便的找出页面中存在问题的地方。
二.面板介绍:
打开chrome开发者工具,切换到Timeline选项卡,界面如下:
 
下面介绍一下各个按钮的作用:
 
工具默认是不开启记录的,如果要分析页面,请点击圆形的记录按钮,按钮变红后就可以开始记录页面的各个事件了,这个时候可以在页面上做各种操作,Timeline工具会详细的记录下各类事件。建议不要记录太久,太多会增加分析的难度。
三.颜色的属性:
Timeline工具里面使用是4种颜色来表示不同类别的事件:
 
蓝色:加载;
黄色:脚本;
紫色:渲染;
绿色:绘制
四.过滤:
过滤面板可以对不同类型的事件和花费时间进行过滤,非常好用:
 
五.事件模式:
在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
 
我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围,如下图:
 
在DETAILS面板中可以查看该记录范围内各类型事件的时间开销:
 
other表示其它事件花费的时间,Idle表示空闲时间,也可以在DETAILS面板中查看单个记录的时间开销,如下:
 
六.名词解释:
(1).send request:发送请求。
(2).evaluate script:评估脚本。
(3).parse html:解析html。
(4).recalculate style:重新计算显示样式。
(5).layout:计算布局。
(6).paint setup:绘制设置【准备绘制】。
(7).paint:绘制。
(8).composite layers:组合层。
(9).timer fired:触发定时器。
(10).function call:函数调用。
(11).receive data:接收数据。
(12).receive response:接收响应。
(13).finish loading:结束加载。
(14).GC event:浏览器垃圾回收。
(15).pevaluate script:评估脚本。
(16).rasterize:光栅化。
七.帧模式:
帧模式能让我们深入的了解页面的渲染性能,“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作,如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制。
 
目前大多数的显示器的刷新频率是60Hz,那么我们页面的绘制频率能达到60帧每秒是最好的,因为软件帧和硬件的刷新频率一致的话,页面能给人非常流畅的感觉,否则就会感觉到很卡,这样我们大概有16.6ms(1000/60)来完成每一帧的呈现,这就是很多人说的“16.6ms”优化。
 
灰色的区域有点难理解,你可以理解是浏览器内部c++的一些工作,这部分可能和前端的js以及渲染没什么关系。
选择一个帧范围可以查看这个范围内帧的一些数据,如下:
 
八.内存模式:
内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存,你可以查看每个时间段的内存使用量,并找出性能问题。

JS代码优化一:谷歌浏览器的timeline工具的使用

谷歌浏览器Timeline用法详解: 大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器。 点击F12会弹出一个界面,顶部带有功能的选项卡,其中有几个功能强大,但是相对较为复杂,比如Time...
  • sdfujichao
  • sdfujichao
  • 2016年08月06日 11:41
  • 1708

JS代码优化一:谷歌浏览器的timeline工具的使用

谷歌浏览器Timeline用法详解: 大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器。 点击F12会弹出一个界面,顶部带有功能的选项卡,其中有几个功能强大,但是相对较为复杂,比如Time...
  • sdfujichao
  • sdfujichao
  • 2016年08月06日 11:41
  • 1708

使用Chrome谷歌浏览器开发者工具进行调试--2015-04-26

主要介绍谷歌浏览器的使用,都是一些自己在工作中用到的技巧,不是很全面,希望可以帮到其他人。 1、打开Chrome开发者工具,总所周知的F12(火狐、IE9/10/11),可以看到如下效果。接下来分别介...
  • ivan0609
  • ivan0609
  • 2015年04月26日 13:16
  • 7989

使用用Chrome开发者工具(Timeline、Profiler)做JavaScript性能分析

你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情。 代码中很小的改动都可...
  • taotao6039
  • taotao6039
  • 2013年10月24日 16:25
  • 2511

谷歌浏览器Timeline用法详解 [复制链接]

本帖最后由 antzone 于 2016-3-22 14:26 编辑 谷歌浏览器Timeline用法详解: 大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器。 点击F12会弹出一个界...
  • weixin_38521613
  • weixin_38521613
  • 2017年07月14日 10:27
  • 178

谷歌浏览器开发工具使用教程

谷歌浏览器开发工具使用教程 浏览:6951 | 更新:2014-01-07 12:27 | 标签: 谷歌    对于本文,作为一个Web开发人员,除了上...
  • jxqiaole
  • jxqiaole
  • 2015年04月24日 19:24
  • 230

谷歌浏览器开发工具使用教程

对于本文,作为一个Web开发人员,除了上面的原因以外,与我们开发相关的,就是Chrome的开发者工具。而本文,就是要详细说说Chrome的开发者工具,说说我为什么认为它比Firebug要好用。 ...
  • dahuzix
  • dahuzix
  • 2013年07月06日 23:34
  • 568

谷歌浏览器扩展工具---eye dropper取色器使用

一、先下载eye dropper.crx这个扩展,如果没有找到的话可以到我的主页里上传的资源里下载二、输入chrome://extensions 进入谷歌浏览器扩展程序 三、直接把刚刚下载好的程序...
  • qq_33679504
  • qq_33679504
  • 2017年11月29日 11:11
  • 135

谷歌浏览器开发工具使用教程

对于本文,作为一个Web开发人员,除了上面的原因以外,与我们开发相关的,就是Chrome的开发者工具。而本文,就是要详细说说Chrome的开发者工具,说说我为什么认为它比Firebug要好用。 ...
  • w410589502
  • w410589502
  • 2015年05月28日 10:53
  • 460

谷歌浏览器开发工具使用教程

对于本文,作为一个Web开发人员,除了上面的原因以外,与我们开发相关的,就是Chrome的开发者工具。而本文,就是要详细说说Chrome的开发者工具,说说我为什么认为它比Firebug要好用。 ...
  • deepwishly
  • deepwishly
  • 2013年05月25日 08:37
  • 786
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谷歌浏览器的timeline工具的使用
举报原因:
原因补充:

(最多只允许输入30个字)