chrome使用Timeline作性能分析

使用Timeline作性能分析

---

Timeline面板记录和分析了web应用运行时的全部活动状况，这是研究和查找性能问题的最佳途径。
###Timeline面板概览 Timeline面板主要有三个部分构成：顶部的概述部分、记录视图和工具栏。

• 点击开始/中止切换按钮，开始或中止记录（参考记录）
• 点击清理按钮来从Timeline中清除已有的记录
• 关联异步事件模式让你更容易的关联异步事件和这些异步事件的调用（参考关于嵌套事件）
• 你能够根据记录中的类型、执行时长去过滤Timeline中的记录（参考过滤和搜索记录）

在记录期间，每一个事件以“瀑布”的形式记录在记录视图中。记录类型有如下四种：加载、脚本执行、渲染和绘制。这些记录以颜色区分，以下：

以chrome加载一个html页面的记录为例。第一条记录（发送请求）是来自chrome的获取页面的HTTP请求，紧接着是一条接收响应的记录（获取响应的HTTP响应）、一些接收数据的记录（来自页面的数据），而后是完成加载的记录。Timeline的一个完整的时间记录和描述参考Timeline事件参考。

当你把鼠标悬停在Timeline的一条记录上时，弹出框显示关联事件的详细信息。好比下面的截图展现加载一张图片资源的细节。Timeline事件参考解释了适用于每个记录类型的详细状况。

在记录试图除了详情，你能够在如下三种模式下检查记录：

• 事件模式 以事件分类展现全部事件记录
• 帧模式 展现页面的渲染性能
• 内存模式 展现随着时间的推移内存使用状况

#####事件模式 事件模式提供以类型组织的记录期间捕获的全部事件的概览。大体能看出你的应用在什么类型的任务上的主要的时间消耗。这个视图中的水平条的长度对应于事件完成花费的时间长度。

当你在事件视图选择一个时间段（参考在Timeline上放大某个事件段），记录视图只展现对应时间段的记录。

#####帧模式 帧模式提供洞察应用的渲染性能的能力。一“帧”表明浏览器渲染一帧要显示的内容必需要作的工做--运行JavaScript、处理事件、更新DOM、改变样式布局和绘制页面。你的应用的目标是运行在每秒60帧下，对应于大多数（但不是所有）视频显示器的60Hz的刷新速率。所以，你的应用程序有大约16.6毫秒（1000毫秒/60）对每一帧作准备。

贯穿帧视图的水平线呈现60FPS和30FPS的帧速率目标。帧的高度对应于该帧渲染所花费的时间。每帧填充的颜色代表了每种类型的任务所花费的时间百分比。

渲染每帧花费的时间显示在记录试图的顶部。若是你把鼠标悬停在显示时间上，会显示帧的附属信息，包括每种类型的任务的时间、CPU时间、计算FPS的时间。 
参考定位强制同步布局的示例。

######关于透明或浅灰色的帧 也许你已经注意到有些区域的帧是浅灰色的或者透明的（空的）。这些区域分别代表：

• DevTools不感知的活动
• 刷新周期间的空闲时间

下面的帧中展现了感知的活动和空闲时间。

######关于绿色条 绘图是一个两步的过程，包括：绘制调用和栅格化。

• 绘制调用。 这是你想要绘制的东西的列表，它来自于你的元素应用的CSS规则。最后还有一些绘制调用和画布上的元素不一样：moveTo, lineTo, and fillRect。尽管在Skia和Chrome绘制后端，他们有着不一样的名字，但它们是相似的概念。
• 栅格化。The process of stepping through those draw calls and filling out actual pixels into buffers that can be uploaded to the GPU for compositing.

在此背景下，实体绿色条和空绿色条之间有什么不一样？

• 实体绿色条的绘制调用被Chrome记录。这些发生在JavaScript执行、样式计算和布局旁的主线程里。组合线程从绘制调用获取数据结构组。
• 空绿色条被栅格化。合成器产生一个工做线程处理这些。

二者都被绘制，它们只是表明工做的不一样子任务。若是你有性能问题你看查找你正在改变什么属性。而后，查看是否有一个合成器，只有这样才能达到一样的目的。CSS触发器能够帮助明确一个解决方案。

######查看帧率统计 被选中的帧范围的平均帧率和标准误差显示在Timeline面板的底部。若是你把鼠标悬停在平均帧速率上，弹窗框会显示该帧的如下信息：

• Selected range -- 选中的时间段内的帧数
• Minimum Time -- 选中的帧内的最小耗时，括号内是相应的帧速率。
• Average Time -- 选中的帧内的平均耗时，括号内是相应的帧速率。
• Maximum Time -- 选中的帧内的最大耗时，括号内是相应的帧速率。
• Standard Deviation -- 计算平均耗时的数量变化。
• Time by category -- 以颜色区分的处理每种类型事件的耗时。

#####内存模式 内存视图展现你的应用的随着时间内存使用状况，包括文档数、DOM节点数，以及在内存内的事件监听（未被GC的）。

内存视图没法直接告诉你哪里引发了内存泄露，但能够帮助你识别你的应用里的什么事件可能致使内存泄露。你能够接着使用Heap Profiler来识别出致使内存泄露的代码。

#####记录 启动记录会话，访问你的应用，再中止记录，以此来获取一段记录。 It helps to know in advance the kind of activity you want to record — for example, page loading, scrolling performance of a list of images, and so forth, and then stick to that script.
为了更好的记录：
1.打开你要记录的页面。
2.打开Timeline面板，使用下面的按钮来开始记录:
点击Timeline面板的这个圆形按钮：
使用快捷键Ctrl+E, Mac上是Cmd+E。
在记录期间，记录按钮会变成：
3.在页面上执行你指望记录的活动。
4.按下页面上当前是红色的记录按钮或使用快捷键来中止记录。

######记录页面加载 一个常见的任务是来自网络初始化的页面加载，键盘快捷键在这种场景下颇有用，让你能快速的启动记录、从新加载页面、中止记录。
记录一个页面加载：
1.在一个新的tab页或者窗口中打开web页面。
2.打开Timeline面板按下Cmd+E(Mac)或者Ctrl+E(Windows/Linux)来开始记录。
3.快速按下Cmd+R或者Ctrl+R来从新加载页面。
4.页面加载完中止记录。（参考记录）
你会获得相似如下的页面，第一条记录（发送HTTP请求）是chrome为获取页面的HTTP请求，紧接着是获取HTTP相应相关的记录，接着是一条或者多条接收数据的记录、完成加载的记录、解析HTML的记录。

参考Timeline事件参考了解详细的记录类型。

######更好获取记录的小技巧 这是一些更好获取记录的小技巧

• 尽量的缩短记录时间。短的记录更好分析。
• 避免没必要要的动做。避免这些和你要记录和分析不相关的动做（鼠标点击、网络请求等）。好比你要记录点击“登陆”之后的事件，不要滚动页面或者加载图片等。
• 禁用浏览器缓存。当记录网络操做时，在DevTools设置面板上禁用浏览器缓存是个不错的主意。
• 禁用扩展程序。Chrome的应用扩展会在Timeline里对你的应用产生一些干扰。你能够作如下操做：
  以隐身模式打开Chrome窗口 建立一个新的Chrome用户用来测试

###分析Tineline面板里的记录 这部分是分析Timeline面板里的记录的一些小贴士。

#####查看记录详情 当你选中Timeline面板里的一条记录，详情面板里会展现该事件相关的详细信息。

有些细节在全部类型的事件中多呈现，好比持续时间和CPU计算时间。关于每种类型事件的详细信息，参考Timeline事件参考。

当你选择一条绘制记录，DevTools高亮了蓝色半透明的矩形更新，以下图所示画面的区域。

#####DOMContentLoaded and Load event markers The Timeline annotates each recording with a blue and a red line that indicate, respectively, when the DOMContentLoaded and load events were dispatched by the browser. Timeline面板以蓝线和红线标注浏览器发出DOMContentLoaded事件和load事件。DOMContentLoaded事件在页面的元素加载和解析完被触发，load事件在文档的全部资源（图片、CSS文件等）所有加载好时触发一次。

#####定位强制同步布局 布局是Chrome计算页面上全部元素的位置、大小的处理过程。一般Chrome在响应中“懒”处理应用中的CSS规则应用或者DOM更新。Chrome在攒一批样式和布局修改而不是每当有变化时就去处理。固然应用程序能够经过查询特定布局相关的元素属性，如element.offsetWidth的值强制Chrome去当即执行布局。因此这被称为“强制同步布局”，并在频繁执行或者在一棵大的DOM树上执行时有可能带来大的性能瓶颈。

Timeline面板会以一个黄色叹号()标识出应用中的强制同步布局，选中这条记录，详情面板包含响应的调用堆栈。

若是一条记录中包含的子记录中有强制布局，父记录会被标识稍微暗一点的黄色叹号。展开父记录能定位到引发强制布局的子记录。
参考定位强制同步布局样例来参考检测和修复这类性能问题。

#####关于嵌套事件 Timeline里的事件有时是嵌套在父事件的下方的。你能够展开父事件查看嵌套的子事件。有两个缘由致使Timeline里有嵌套事件：

• 在处理一个事件时先发生了同步事件。每一个事件内部产生两个原子事件，一个用来启动一个用来结束时，被转换为一个单一的“连续”事件。任何其余发生在这两个原子事件之间的事件成为外部子事件。

下面的截图是一个嵌套同步事件的示例。在这个例子中，Chrome正在解析一些HTML时发现须要一些外部资源被加载。这些请求在解析完成前发出来，因此发送请求时间做为解析HTML的子事件被显示出来。

#####给Timeline里的嵌套事件着色 Timeline条按照如下着色：

• 最前面的、颜色最深的条表明事件和它的全部的同步子事件花费的时间。
• 接着稍微淡一点的颜色表明时间和它的全部异步子事件的CPU计算时间。
• 最淡的条表明从第一个异步事件开始到最后一个异步事件结束所花费的时间。

选中一条父记录将在详情面板上展现如下内容：

• 以文本和饼图的形式的时间类型概览。
• 此时这条记录使用的JS堆大小，和这个操做对堆大小的影响
• 这个事件响应的其余详细信息。

#####过滤和搜索记录 你能够按照事件类型去过滤展现哪些记录（好比只展现加载事件），或只展现大于等于1毫秒或者15毫秒的记录。你也能够过滤匹配某个字符串的记录。

当查看全部事件时，你可能想找某一条记录，可是它被淹没在众多记录中。这种状况你能够不使用过滤功能。按下Ctr+F(Window/Linux)或者Cmd+F(Mac)，此时Timeline中已经对角到包含搜索项的记录。

#####在Timeline上放大某个事件段 为了更好的分析记录，你能够放大Timeline的某一段概览，以减小记录试图中相应的时间刻度。

放大时间段，能够按照如下作法：

• 在概览区域，用鼠标拖动一个时间段。
• 规则区域调整灰色条。

这是更过的关于Timeline时间段的小贴士：

• 经过拖动两个滑动条来"Scrub"当前时间段内的记录。

• 触控板用户：
  • 向左或向右滑动两个手指移动当前时间轴选择。
  • 向上或向下滑动用两个手指扩大或减少当前时间轴选择。
• 悬停在一个时间段上向上或向下滚动鼠标滚轮来扩大或减少当前选择的时间段。

#####保存和加载记录 你能够以json文件保存Timeline记录，后面能够在Timeline中再打开。

######保存Timeline记录 1.在Timeline中右键或者按住Ctrl再单击鼠标左键(Mac中)，选择保存Timeline数据菜单或者在键盘上使用Ctrl+S。
2.选择一段时间段来点击保存。

######打开Timeline记录 1.右键或者按住Ctrl再单击鼠标左键选择加载要加载的Timeline数据，或者使用Ctrl+O键盘快捷键。
2.定位到json文件，选中并打开。

#####用户产生的Timeline事件 应用能够添加它们的事件到Timeline记录中。你可使用console.timeStamp()方法添加一个原子事件到记录中，或者使用console.time()和console.timeEnd()来标记处代码执行的时间范围。好比下图中console.timeStamp()被用来显示"Adding result"事件。参考在Using the Console中使用Marking the Timeline来获取更多信息。

#####记录中的CPU计算时间 你会看到上面出如今Timeline记录的浅灰色条，表示CPU忙。鼠标悬停在在一个CPU条会高亮处Timeline部分在此期间，CPU是活动的（以下图所示）。一个CPU条的长度一般是Timeline中的它下面全部的（高亮）事件的总和。若是二者不匹配，这多是因为如下之一：

• 页面被检查期间其余页面运行在同一个线程里（好比两个标签页打开同一个网站，有一边在setTimeout()里执行一些代码）。
• 不感知的活动。

###Timeline事件参考 本节列出并说明了各个类型的记录类型，和它们的属性。

#####Common event properties 某些详情存在于全部类型的事件，而有些只适用于某些事件类型。本节列出了常见的不一样事件类型的属性。下面的参考中将列出特定于某些事件类型的属性。

事件汇总
对于有嵌套事件的事件，每一层目录所花费的时间。
调用堆栈
对于有子事件的事件，每一层目录所花费的时间。
CPU计算时间
事件记录所消耗的CPU计算时间。
详情
事件的其余详情。
持续时间(时间戳)
事件和它的子事件完成所消耗的时间；时间戳是相对于记录开始事件发生的时间。
自身时间
不包括任何子事件的事件自身消耗的时间。
堆空间使用大小
事件记录期间应用占用的内存大小，和取样期间堆空间使用的变化。

#####Loading事件

事件	描述
解析HTML	Chrome执行HTML解析算法
完成加载	一个网络请求完成
接收数据	请求的数据被接收，这会是一个或多个的接收数据事件
接收响应	来自请求的最初的HTTP响应
发送请求	一个已发送的网络请求

#####Loading事件属性 资源
请求资源的URL。
预览
请求资源的预览（仅支持图片）。
请求方法
请求的HTTP方法(GET或POST等等)。
状态码
HTTP响应状态码。
MIME类型
请求的资源的MIME类型。
数据大小
请求的资源的字节数。

#####Scripting事件 这一节介绍Scripting类别的事件和它们的属性。

事件	描述
动画帧触发	一个预约的动画帧被触发，它的回调处理程序被调用。
取消动画帧	一个动画帧被取消。
GC事件	垃圾回收发生。
DOM内容加载	DOM内容加载被浏览器触发。这个事件在全部的页面DOM元素加载和解析完被触发。
脚本执行	一段脚本被执行。
事件	一个JavaScript事件("鼠标按下",或按键事件等)。
函数调用	调用一个顶层的JavaScript函数（仅出如今当浏览器进入JavaScript引擎）。
设置定时器	一个定时器以setInterval()或者setTimeout()建立。
请求动画帧	调用requestAnimationFrame()函数来调度新的帧。
移除定时器	将以前建立的定时器清除。
开始计时	调用console.time()函数。
计时结束	调用console.timeEnd()函数。
定时任务触发	一个以setInterval()或者setTimeout()调度的定时器被触发。
XHR状态改变	XMLHTTPRequest状态改变。
XHR加载	XMLHTTPRequest完成加载。

#####Scripting事件属性

Timer ID
定时器ID.
Timeout
定时器指定的超时时间。
Repeats
定时器是否循环的标识。
Function Call
被调用的函数。

#####Rendering事件 这一节列出渲染时间和它们的属性。

事件	描述
无效布局	变化的DOM的布局无效
布局	页面执行布局
从新计算样式	Chrome从新计算元素样式
滚动	嵌套视图的内容被滚动

#####Rendering事件属性

Layout invalidated
致使无效布局的代码堆栈。
Nodes that need layout
从新布局前须要布局的节点数。这一般是由开发者的代码无效致使的。
Layout tree size
根布局（Chrome开始布局的节点）下节点总数。
Layout scope
可能的值是“部分”（从新布局的边界是DOM的一部分）或者整个文档。
Elements affected 从新计算样式，受影响的元素数量。 recalculation. Styles invalidated 从新计算样式时，致使无效样式的代码堆栈。

#####Painting事件 这一节介绍Painting事件和它们的属性。

事件	描述
Composite Layers	Chrome的渲染引擎合成图像层。
Image Decode	图像解码。
Image Resize	图像还原为原始大小。
Paint	复合层绘制到显示器的一个区域。鼠标悬停在在一条Paint纪录页面上会高亮显示更新的区域。

#####Painting事件属性 Location绘制的矩形的x和y坐标。Dimensions绘制区域的高度和宽度。