启动记录会话，访问你的应用，再停止记录，以此来获取一段记录。 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.按下页面上当前是红色的记录按钮或使用快捷键来停止记录。
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文件等）全部加载好时触发一次。
应用可以添加它们的事件到Timeline记录中。你可以使用console.timeStamp()方法添加一个原子事件到记录中，或者使用console.time()和console.timeEnd()来标记处代码执行的时间范围。比如下图中console.timeStamp()被用来显示"Adding result"事件。参考在Using the Console中使用Marking the Timeline来获取更多信息。
使用Timeline做性能分析
Timeline面板记录和分析了web应用运行时的所有活动情况，这是研究和查找性能问题的最佳途径。
Timeline面板概览
Timeline面板主要有三个部分构成：顶部的概述部分、记录视图和工具栏。
在记录期间，每个事件以“瀑布”的形式记录在记录视图中。记录类型有以下四种：加载、脚本执行、渲染和绘制。这些记录以颜色区分，如下：
以chrome加载一个html页面的记录为例。第一条记录（发送请求）是来自chrome的获取页面的HTTP请求，紧接着是一条接收响应的记录（获取响应的HTTP响应）、一些接收数据的记录（来自页面的数据），然后是完成加载的记录。Timeline的一个完整的时间记录和描述参考Timeline事件参考。
当你把鼠标悬停在Timeline的一条记录上时，弹出框显示关联事件的详细信息。比如下面的截图展示加载一张图片资源的细节。Timeline事件参考解释了适用于每一个记录类型的详细情况。
在记录试图除了详情，你可以在以下三种模式下检查记录：
事件模式
事件模式提供以类型组织的记录期间捕获的所有事件的概览。大致能看出你的应用在什么类型的任务上的主要的时间消耗。这个视图中的水平条的长度对应于事件完成花费的时间长度。
当你在事件视图选择一个时间段（参考在Timeline上放大某个事件段），记录视图只展示对应时间段的记录。
帧模式
帧模式提供洞察应用的渲染性能的能力。一“帧”代表浏览器渲染一帧要显示的内容必须要做的工作--运行JavaScript、处理事件、更新DOM、改变样式布局和绘制页面。你的应用的目标是运行在每秒60帧下，对应于大多数（但不是全部）视频显示器的60Hz的刷新速率。因此，你的应用程序有大约16.6毫秒（1000毫秒/60）对每一帧做准备。
贯穿帧视图的水平线呈现60FPS和30FPS的帧速率目标。帧的高度对应于该帧渲染所花费的时间。每帧填充的颜色表明了每种类型的任务所花费的时间百分比。
渲染每帧花费的时间显示在记录试图的顶部。如果你把鼠标悬停在显示时间上，会显示帧的附属信息，包括每种类型的任务的时间、CPU时间、计算FPS的时间。
参考定位强制同步布局的示例。
关于透明或浅灰色的帧
也许你已经注意到有些区域的帧是浅灰色的或者透明的（空的）。这些区域分别表明：
下面的帧中展示了感知的活动和空闲时间。
关于绿色条
绘图是一个两步的过程，包括：绘制调用和栅格化。
在此背景下，实体绿色条和空绿色条之间有什么不同？
两者都被绘制，它们只是代表工作的不同子任务。如果你有性能问题你看查找你正在改变什么属性。然后，查看是否有一个合成器，只有这样才能达到同样的目的。CSS触发器可以帮助明确一个解决方案。
查看帧率统计
被选中的帧范围的平均帧率和标准偏差显示在Timeline面板的底部。如果你把鼠标悬停在平均帧速率上，弹窗框会显示该帧的以下信息：
内存模式
内存视图展示你的应用的随着时间内存使用情况，包括文档数、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事件参考了解详细的记录类型。
更好获取记录的小技巧
这是一些更好获取记录的小技巧
以隐身模式打开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条按照以下着色：
选中一条父记录将在详情面板上展示以下内容：
过滤和搜索记录
你可以按照事件类型去过滤展示哪些记录（比如只展示加载事件），或只展示大于等于1毫秒或者15毫秒的记录。你也可以过滤匹配某个字符串的记录。
当查看所有事件时，你可能想找某一条记录，但是它被淹没在众多记录中。这种情况你可以不使用过滤功能。按下Ctr+F(Window/Linux)或者Cmd+F(Mac)，此时Timeline中已经对角到包含搜索项的记录。
在Timeline上放大某个事件段
为了更好的分析记录，你可以放大Timeline的某一段概览，以减少记录试图中相应的时间刻度。
放大时间段，可以按照以下做法：
这是更过的关于Timeline时间段的小贴士：
保存和加载记录
你可以以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中的它下面所有的（高亮）事件的总和。如果两者不匹配，这可能是由于以下之一：
Timeline事件参考
本节列出并说明了各个类型的记录类型，和它们的属性。
Common event properties
某些详情存在于所有类型的事件，而有些只适用于某些事件类型。本节列出了常见的不同事件类型的属性。下面的参考中将列出特定于某些事件类型的属性。
事件汇总
对于有嵌套事件的事件，每一层目录所花费的时间。
调用堆栈
对于有子事件的事件，每一层目录所花费的时间。
CPU计算时间
事件记录所消耗的CPU计算时间。
详情
事件的其他详情。
持续时间(时间戳)
事件和它的子事件完成所消耗的时间；时间戳是相对于记录开始事件发生的时间。
自身时间
不包括任何子事件的事件自身消耗的时间。
堆空间使用大小
事件记录期间应用占用的内存大小，和取样期间堆空间使用的变化。
Loading事件
Loading事件属性
资源
请求资源的URL。
预览
请求资源的预览（仅支持图片）。
请求方法
请求的HTTP方法(GET或POST等等)。
状态码
HTTP响应状态码。
MIME类型
请求的资源的MIME类型。
数据大小
请求的资源的字节数。
Scripting事件
这一节介绍Scripting类别的事件和它们的属性。
Scripting事件属性
Timer ID
定时器ID.
Timeout
定时器指定的超时时间。
Repeats
定时器是否循环的标识。
Function Call
被调用的函数。
Rendering事件
这一节列出渲染时间和它们的属性。
Rendering事件属性
Layout invalidated
导致无效布局的代码堆栈。
Nodes that need layout
重新布局前需要布局的节点数。这通常是由开发者的代码无效导致的。
Layout tree size
根布局（Chrome开始布局的节点）下节点总数。
Layout scope
可能的值是“部分”（重新布局的边界是DOM的一部分）或者整个文档。
Elements affected 重新计算样式，受影响的元素数量。 recalculation. Styles invalidated 重新计算样式时，导致无效样式的代码堆栈。
Painting事件
这一节介绍Painting事件和它们的属性。
Painting事件属性
Location
绘制的矩形的x和y坐标。
Dimensions
绘制区域的高度和宽度。
Content available under the CC-By 3.0 license
原文地址：CN-Chrome-DevTools/Performance-profiling-with-the-Timeline.md at master · zhangyaowu/CN-Chrome-DevTools