Summary视图显示每个访问过的URL的高级分析结果
Summary视图显示了session记录中所有访问过的URL链接的信息。点击顶部表格中某个具体的url下方就会更新图表和时间线来显示所选链接的数据。在
这个视图中我们可以得到以下信息：
? ?
载入页面所耗时间：Page Load Time[ms]（页面载入时间[毫秒]）栏显示从页面开始载入到浏览器派发onload事件所经历的时间；
网络请求花了多长时间：下方NetWork饼图从DNS解析、网络连接、服务器响应以及网络传输方面详细分解网络请求过程，由于网络内容在这段时间里是并行下载的，所以NetWork[ms]栏则显示的是所有网络请求时间的总和；
? ? ?
下载了多少以及什么类型的资源文件，对比有多少资源是从浏览器缓存读取的（Resource条形图）；
通过JavaScript触发器（脚本载入、载入完毕、鼠标、键盘等事件）和JavaScript API或库执行的所有JavaScript函数一共耗时多长时间；
渲染页面所占时间。浏览器必须计算布局并渲染页面显示。浏览器重新计算布局和重绘的时间取决于你的HTML、样式表以及动态DOM操作。Rendering[ms]栏显示了页面在渲染工作上实际消耗的时间。
?
屏幕下方的时间轴图显示精确的页面生命周期：该图反映了页面进程中网络资源下载、JavaScript执行、页面发生渲染的时间，CPU占用情况，以及发生了哪些事件。例如：onLoad事件、鼠标或键盘交互、XmlHttpRequests等。
在我们的例子中，以下内容引起了我的注意：
1. 2.
maps.google.com页面的页面载入时间为6.5秒：这是页面在派发onload事件之前浏览器初始化html和所有引用的对象所消耗的时间；
这页面的网络时间耗时12秒。当我观察该页面的Network饼图时，我发现50%多的时间消耗在传输内容（这也可能意味着我的网速慢）上，42%的时间花在服务器响应上（指过了多长时间服务器开始响应），以及8%的时间消耗在与服务器建立物理连接上。
3. 总耗时3.6秒的JavaScript也是重要角色。JavaScript trigger饼图显示时间的具体消耗情况：载入script耗时2.1秒，onload事件派发耗时1.3秒，剩下的由鼠标点击事件处理占用。
4. 时间轴还显示页面发出了2个XmlHttpRequest请求。它由一个小图标标注在event行中请求发生的时间点上。下一节将进行更详细的讨论。
第五步：Timeline视图（时间轴视图）——近距离观察页面生命周期事件
时间轴视图可以通过双击Cockpit面板中的Timeline节点打开，或者在Summary视图中通过在某个URL上点击右键，选择“Drill Down-TimeLine”打开。我们
用这种方式打开maps.google.com页面：
查看某个url的Timeline
点击“drill down（译者注：详细）”菜单将打开所选页面的Timeline视图，通过工具栏和右键菜单，你可以打开更多选项，比如内容类型和JavaScript触发器的颜
色值，或者显示更多事件，比如鼠标移动，点击和键盘事件。下面的截图显示时间轴开启更多选项的效果：
针对选定页面的Timeline显示网络、JavaScript、渲染、CPU和事件
我们可以在此视图下做如下观测：
1. 2. 3.
网络请求并行下载来自6个不同域的内容；
到浏览器派发onload事件大约需要6.5秒（图中由IE图标标识）；
从maps.gstatic.com下载main.js耗时2.41秒（鼠标悬停在这段上可以看到详细信息）；
4. 5. 6.
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请求。
我们后退一步，回到前一个Timeline视图。我对Ajax请求比较感兴趣。双击Event行中的
中找出实际执行这个XmlHttpRequest的位置：
图标打开一个新的PurePath视图，软件会在JavaScript跟踪
进入PurePath视图分析XmlHttpRequest细节
在 界面上方我们能看到的执行这段代码的JavaScript文件——请看Details栏。在树中我们能看到发出这个XHR请求的整个JavaScript 执行过程，包括方法
调用次数和调用参数。duration栏显示JavaScript执行共耗时1127毫秒。这个时间包含了XHR返回的时间和等待 JavaScript计时器的时间。打开这个网络请求的详细信息（译者注：在PurePath树中定位的Network Request上点右键，选择“Details”），将显示Http请求和响应头、请求的精确时间，包括连接、等待、服务器响应和网络传输时间，还有从服务器返回的实际内容（译者注：在Details面板底部有个切换标签Details/Response Content可以查看）。