第五步：Timeline视图（时间轴视图）——近距离观察页面生命周期事件

　　时间轴视图可以通过双击Cockpit面板中的Timeline节点打开，或者在Summary视图中通过在某个URL上点击右键，选择“Drill Down-TimeLine”打开。我们用这种方式打开maps.google.com页面：

　　查看某个url的Timeline

　　点击“drill down（译者注：详细）”菜单将打开所选页面的Timeline视图，通过工具栏和右键菜单，你可以打开更多选项，比如内容类型和JavaScript触发器的颜色值，或者显示更多事件，比如鼠标移动，点击和键盘事件。下面的截图显示时间轴开启更多选项的效果：

　　针对选定页面的Timeline显示网络、JavaScript、渲染、CPU和事件

　　我们可以在此视图下做如下观测：

　　网络请求并行下载来自6个不同域的内容；

　　到浏览器派发onload事件大约需要6.5秒（图中由IE图标标识）；

　　从maps.gstatic.com下载main.js耗时2.41秒（鼠标悬停在这段上可以看到详细信息）；

　　main.js下载完成后，可以看到脚本实际执行耗时1.1秒，并触发两个JavaScript文件的下载（1秒）和另外2个JavaScript的执行（2秒）；

　　CPU占用率显示JavaScript执行占用的浏览器CPU时间；

　　Event轴显示了鼠标点击事件，XmlHttpRequest事件和onUnload事件。

　　我们缩大鼠标第一次点击到产生XmlHttpRequest请求的时段。在我的例子中，这个时间片是从11秒到12秒。通过在开始处点击鼠标左键拖拽到结束位置来执行放大操作。当你松开鼠标拖拽的，视图将放大到下面截图中显示的时间片上：

　　放大时间轴以显示事件详细信息

　　时间轴上显示了点击事件，一个XmlHttpRequest事件，其后紧随一个onError事件，再后一点还有一个XmlHttpRequest(XHR)事件。鼠标悬停在事件上将显示实际派发事件的DOM元素。鼠标悬停在JavaScript上将显示脚本执行事件处理的时间，悬停在network请求上将显示下载了哪些资源。我们也能看到浏览器执行了哪些类型的渲染。我们发现第一次鼠标点击事件处理函数触发新内容的加载——包括一个来自maps.gstatic.com的JavaScript文件。执行这个JavaScript文件——一旦它被加载以后——触发了一个XHR请求。我们还能看到一个onError时间处理函数被触发并且运行了240毫秒。

　　第六步：PurePath视图（路径视图）——JavaScript、DOM和Ajax问题的详细说明

　　从Timeline视图（和从其他视图一样）我们可以更进一步进入每个动作去观察事件触发执行了哪些JavaScript函数和哪些JavaScript函数发出了XHR请求。在时间轴上点右键选择“Drill Down to Timeframe”(进入详细时间片)将来到PurePath视图，并显示当前所放大的时间片上所有的活动——如下图：

　　进入指定时间片的PurePath视图

　　在界面上方，我们可以看到所选时间片中浏览器的所有活动，包括由script标签或事件响应触发的JavaScript的执行情况。也包括网络请求和渲染次数。Stats（译者注：统计）栏显示该行执行的JavaScript触发的是计时器还是Ajax请求。那些占总体响应时间较多的活动会被彩色高亮显示。

　　在PurePath列表中选择一个活动，PurePath或JavaScript追踪树将更新显示当前所选活动的信息。PurePath树显示了JavaScript代码执行过程，包括每个方法执行的时间和调用的参数以及返回值（我们在第二步中开启了参数捕获选项）。代码跟踪也追踪计时器调用，并把这些调用当做树的一部分。我们不仅能看到JavaScript方法，也能看到DOM访问和AJAX请求。