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

TimeLine 面板总览

4部分组成:

1.控制面板

包含开始记录,结束记录,配置我要捕获什么内容组成

2.概述面板

页面性能的高度总结,详见下文。

3.火焰图面板

Cpu栈的可视化描述

4.细节面板

当一个事件被选中,这个面板会显示有关这个事件的更多信息。如果没有事件选中,会显示选中的火焰图的信息。

概述面板

该面板有3部分图组成:

1.FPS

每秒的火焰。绿色的柱状越高,fps越高。fps上红色的区块预示着长火焰,有可能是卡顿产生了。(动画渲染时间超过了屏幕的刷新时间)

2.cpu

cpu资源。这个面积图指示了哪种事件消耗CPU资源多。

3.net

每个彩色柱代表一种资源。柱子越高,获取它的时间越长。每个柱较淡颜色的部分代表了它的等待时间(发送请求到第一个比特下载下来的时间)。深色的部分代表它的处理时间(第一个比特接收

到最后一个比特接收的时间)

柱子的颜色对应如下:

html文件是蓝色。

script问件事黄色。

Stylesheets文件是紫色。

media文件是绿色。

其他文件是灰色。

做一个记录

记录一个页面的载入过程,我们需要打开Timeline面板,打开我们需要记录的网页,刷新网页,就会自动开始记录(经测试不可以,得在timeline面板按F5)

如果要记录页面交互,按() 或Ctrl+e开始记录,页面操作,然后按红色按钮结束记录。

当记录结束,工具组会自动缩放到和你最相关的部分给你查看。

记录小贴士

让纪录的时间越短越好:短时间让你更容易分析。

避免不必要的动作

禁用浏览器缓存

禁用拓展插件

查看记录细节

当你选中火焰表的一个事件,细节面板会显示更多有关的细节。

一些选项卡,比如Summary,是所有类型的事件。而其他的选项卡只显示某一种事件,查看Timeline event reference获得更多的记录类型。

纪录同时捕获截图

TimeLine面板可以在载入页面的时候捕获截图。这就是传说中的幻灯片(连续截图)

使用方法就是在控制面板选中Screenshots ,然后在概述面板中鼠标放上去就能看了

JavaScript切图

在控制面板中选中JS Profile选项框,这样你就可以在火焰图中看到每个Js函数的调用情况。

painting切图

当在控制面板中选中Paint,记录后你可以单击一个Paint事件,然后你可以在细节面板中查看

渲染配置

打开工具主菜单,选择 More tools > Rendering settings打开配置面板,这个会对于调试paint相关的有帮助。具体如下:

搜索记录

输入Ctrl+F (Windows / Linux) 打开,输入事件名称查询,比如 Event

如何使用Goolge Timeline工具的更多相关文章

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

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

  2. Chrome渲染分析之Timeline工具的使用

    原文http://www.th7.cn/web/html-css/201406/42043.shtml Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处 ...

  3. 使用Chrome DevTools的Timeline分析页面性能

    随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...

  4. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  5. 用3D再现2D偶像的可爱,Cygames【偶像大师 灰姑娘女孩】开发示例

          作为万代南梦宫娱乐的偶像养成游戏[偶像大师]的派生作品,是由Mobage创作的[偶像大师 灰姑娘女孩].这个游戏的最新作品,是现在累计下载突破1200万的大作,Android/iOS平台的 ...

  6. 被解放的GPU CSS3动画加速

    概念 图形处理器( Graphics Processing Unit ) 专门用来处理在个人电脑.工作站或游戏机上图像运算工作 显卡的“心脏” 90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器 ...

  7. [JavaScript 随笔] 垃圾回收

    在 JavaScript 中,由于垃圾回收是自动进行的,所以人们在编码时可能不太会注意这方面.但事实是,一些 webapp 在使用一段时间后,会出现卡顿的现象,特别是那些单页应用,包括 WebView ...

  8. webkit浏览器渲染影响因素分析

    前言:浏览器的渲染对性能影响非常大,特别是在移动端页面,在宏观上,我们可以参考雅虎那20几条军规来操作,但在微观渲染层面,实际还没有一套相对成型的理论做为依据. 本文只是抛砖引玉,带大家进入微观的优化 ...

  9. 页面性能优化和高频dom操作

    一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用 ...

随机推荐

  1. js 与 jq 的节点添加删除实例

    JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  2. quartz配置文件详解

    quartz配置文件详解(转载)     quartz学习总结: 一.关于job:    用Quartz的行话讲,作业是一个执行任务的简单Java类.任务可以是任何Java代码.只需你实现org.qu ...

  3. 51nod1102(数塔)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1002 题意:中文题诶- 思路:简单dp 从底层往上递推,每个 ...

  4. CoreData __ 基本原理

    操作过程 Context想要获取值,先要告诉连接器,我要什么东西 链接器再告诉store, 你给我什么东西, store去找 找到之后返回给链接器,链接器再返回给Context          Co ...

  5. angular1.x的简单介绍(二)

    首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...

  6. ubuntu下更改鼠标移动速度

    ubuntu下,系统设置中,无法更改外接鼠标的移动指针速度,如图: 然后百度,终于找到一个靠谱打方法: 命令: xset m N 其中,N是速度,估计取值为0-10 该方法比起网上的某些攻略简单好多

  7. 数据库邮件服务器中sp_send_dbmail的参数使用

    sp_send_dbmail [ [ @profile_name = ] 'profile_name' ]     [ , [ @recipients = ] 'recipients [ ; n ]' ...

  8. 《Python操作SQLite3数据库》快速上手教程

    为什么使用SQLite数据库? 对于非常简单的应用而言,使用文件作为持久化存储通常就足够了,但是大多数复杂的数据驱动的应用需要全功能的关系型数据库.SQLite的目标则是介于两者之间的中小系统.它有以 ...

  9. 如何把Qlik Sense嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这是一个给初学者(尤其对VS不熟悉的BI工程师)的入门操作向导. Qlik Sense是 ...

  10. 开源Unity小插件CheatConsole

    我们在开发游戏的过程中,通常都需要一些快捷的方式来进行一些非常规的测试,这些功能一般被称作控制台或者GM指令,比如虚幻竞技场中,可以使用~键呼出控制台,输入一些指令即可进行快捷设置,比如设置分辨率,全 ...