转载:http://www.ghugo.com/chrome-timeline/
概述
这个工具真的很强大,Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件,框架,和实时内存用量3个方面的数据来监测网页,通过这些数据,我们可以方便的找出页面中存在问题的地方。
Timeline面板
打开chrome开发者工具,切换到Timeline选项卡,界面如下:
功能很多,非常复杂是不是,对应E问不好的同学,真的是无从下手,幸好有翻译工具,下面我们一步一步的揭开这个工具的神秘面纱。
强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。
工具默认是不开启记录的,如果要分析页面,请点击圆形的记录按钮,按钮变红后就可以开始记录页面的各个事件了,这个时候可以在页面上做各种操作,Timeline工具会详细的记录下各类事件。建议不要记录太久,太多会增加分析的难度。
颜色的属性
Timeline工具里面使用是4种颜色来表示不同类别的事件:
蓝色:加载;
黄色:脚本;
紫色:渲染;
绿色:绘制
过滤
过滤面板可以对不同类型的事件和花费时间进行过滤,非常好用:
事件模式
在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围,如下图:
在DETAILS面板中可以查看该记录范围内各类型事件的时间开销:
other表示其它事件花费的时间,Idle表示空闲时间,也可以在DETAILS面板中查看单个记录的时间开销,如下:
名词解释:
发送请求 | evaluate script评估脚本 | parse html解析html | recalculate style重新计算显示样式 |
计算布局 | paint setup绘制设置【准备绘制】 | paint绘制 | composite layers组合层 |
触发定时器 | function call函数调用 | receive data接收数据 | receive response接收响应 |
结束加载 | GC event浏览器垃圾回收 | pevaluate script评估脚本 | rasterize光栅化 |
帧模式
帧模式能让我们深入的了解页面的渲染性能,“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作,如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制。
目前大多数的显示器的刷新频率是60Hz,那么我们页面的绘制频率能达到60帧每秒是最好的,因为软件帧和硬件的刷新频率一致的话,页面能给人非常流畅的感觉,否则就会感觉到很卡,这样我们大概有16.6ms(1000/60)来完成每一帧的呈现,这就是很多人说的“16.6ms”优化。
灰色的区域有点难理解,你可以理解是浏览器内部c++的一些工作,这部分可能和前端的js以及渲染没什么关系。【陈子舜】
选择一个帧范围可以查看这个范围内帧的一些数据,如下:
内存模式
内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存,你可以查看每个时间段的内存使用量,并找出性能问题。
结束语
PS:本文来自huihuixiao发表在部门博客的内容,觉得非常有价值故转载出来,在此感谢huihui的辛苦付出!
通过Timeline来观察页面的渲染变化,有利于分析页面的性能瓶颈。timeline是个非常不错的工具,下一次将讲解”Rendering”的用法,通过timeline + Rendering 基本能分析出页面的渲染性能。这在移动端非常有用。
参考文档
https://developers.google.com/chrome-developer-tools/docs/timeline
相关推荐
Chrome浏览器自带的Timeline工具的使用说明及翻译。
该软件是基于原生js编制的时间线(时间轴)前端渲染工具,设计为使用js的google可视化图表(Google Visualization Chart),可在任何浏览器上运行(包括IE7,IE6没测试),可选择搭配Google API在线搭建。...
主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
echarts3中如何使用timeline,官方的事例代码不是很容易看懂,所以写示例希望也能帮助你搞定timeline,原文地址 http://blog.csdn.net/kebi007/article/details/60882367
它使用虚拟渲染来有效地做出React。 该组件具有以下功能: 可以处理十万条记录。 无限日历滚动 三种缩放级别:日,周,月 完全可定制。 支持所有CRUD操作。 任务和链接的创建。 支持分页。 可以轻松地与...
timeline:使用d3创建时间表 , 该图表以时间轴或时间表的形式显示了在时间连续体内具有已定义的开始和/或结束的事件。 事件可以是瞬间(仅一个日期)或间隔(开始日期和结束日期)。 时间线由两个波段组成。
Office Timeline Plus 是业内首屈一指且内置超精美海量在线ppt时间轴经典模板大全同时每个模板都能完全自定义的ppt时间轴制作工具,专注于ppt时间轴模板生成和制作的Office插件,轻松构建令人惊叹的项目视觉效果,该...
TimeLine TimeLine TimeLine TimeLine TimeLine TimeLine
利用TimeLine和Cinemachine实现过场动画的效果
Timeline Maker Pro包含大量自动化功能、时间线模板和互动展示功能的时间线制作软件,你甚至不用去画,就可以自动构建需要的时间线。
Chrome的时间轴可让您将Google Chrome与Windows时间线连接,并在Chrome中打开时间轴链接。 与此扩展一起,您需要从Microsoft Store安装付费应用程序。 此应用程序用于将您的Chrome历史记录安全地推送到Windows时间轴...
unity TimeLine 入门教程 unity TimeLine 入门教程unity TimeLine 入门教程
Jquery timeline 时间轴
NULL 博文链接:https://shareisattitude.iteye.com/blog/2175286
微信小程序timeLine时间线代码片段示例
TimeLineView Android Timeline View Library demonstrate the the power of ConstraintnLayout and RecyclerView. Showcase Quick Setup 1. Include library Using Gradle TimelineView is currently...
Laravel开发-timeline 此包用于时间线。
Timeline-View Android Timeline View Library (Using RecyclerView) is simple implementation used to display view like Tracking of shipment/order, steppers etc. Specs Badges/Featured In Sample ...
Android-Timeline-View Android timeline to display horizontal sliding cards in recycler view, group by Day, Month or Year. Demo Video Apps using the library: Gourmet (http://thegourmet.app) Play...
http://www.simile-widgets.org/timeline/ 基于DHTML,AJAX的一个日程安排的小工具,有点类似GOOGLE地图