会员登录 | 注册

来去留技术信息资源

来去留技术信息资源
来去留网 > 去看信息 > 程序系统 > Page Speed的安装、使用与卸载说明(2)

Page Speed的安装、使用与卸载说明(2)

2012-03-19 22:00来源:未知发布者:laiquliu 查看:

如何记录单页面活动:

启动(重启) Firefox并关闭所有的页签。

1、清除浏览器缓存;

2、通过在地址栏输入 about:blank 来访问一个空白页面以清除所有会被记录的浏览器活动;

3、选择 工具 > firebug > 打开firebug;

4、在Firebug窗口中,选择 Page Speed活动 页签;

page speed记录单页面活动

5、点击 记录活动;

6、访问你想要记录的页面,事件就以时间线的形式显示出来了;

page speed记录的页面事件以时间线的形式显示出来

7、任何时间想要查看结果的话,只需要点击 停止 让移动的时间线停止下来。

提示:你也可以使用键盘的快捷方式来停止记录: Linux和Mac OS X上用Ctrl+R,Windows上用Alt+R。鼠标移动到资源信息上可以通过信息提示的方式查看资源的绝对地址。

8、要了解展示出来的时间的更多信息请继续往下看。

Page Speed活动事件的注解

活动面板根据时间线展示浏览器事件,当前页面所需要的每个资源都会被记录。以10毫秒的频率记录事件,如果浏览器事件没有使用完整的10毫秒的话,事件会以比较淡的阴影展示,在时间线中被展示成没有颜色的区块意味着浏览器正在处理其他的过程,比如DOM和CSS的解析, Flash ActionScript过程, 绘制, 操作系统时间等等。

下面的表格详细的描述了事件类型:

网络事件

  • DNS:浏览器正在执行DNS查询资源的过程
  • Wait:浏览器正在等待建立和网络服务器之间的网络(TCP)连接。因为浏览器限制了连接的上限,并一直处于打开状态,如果到达了限制的上限的话,那浏览器就必须等候有一个连接关闭才能重新打开一个连接。(如果想了解更多的浏览器连接信息, 可以参考后续的跨域名并行下载。) 这个事件显示了浏览器等候其他事件结束的时间。
  • Connect:浏览器和网络服务器之间正在建立网络(TCP)连接。这个事件只会出现在产生新的连接时,而不会出现在连接被重用时。
  • Send:浏览器已经发送了HTTP请求,仅仅是GET类型的请求会被展示。
  • Connected:浏览器正在等候网络数据传输,浏览器结束TCP连接时这个事件结束。如果资源显示了漫长的已连接状态就意味着可以通过优化来减少荷载大小以获得更好的收益,比如压缩。

本地事件

  • Cache Hit:浏览器成功的在缓存中定位到资源。
  • Data Available:数据可被浏览器解析。当网络服务器大量返回数据时吗,如果数据是个很大的文件时,很多这样的事件会展示在单个资源上。
  • Paint:浏览器正在渲染页面上的元素。
  • JS Parse:浏览器正在解析JavaScript,这个事件能够和其他事件重叠,当这种情况发生时,这个事件以子行的形式在这个资源上展示。
  • JS Execute:浏览器正在执行 JavaScript,这个事件能够和其他事件重叠,当这种情况发生时,这个事件以子行的形式在这个资源上展示,如果你能看到在JS解析和JS执行之间有固定的延迟,这意味着这个资源中包含的方法可能是延时的。

收集完整的JavaScript方法执行信息

默认状态下,Page Speed活动收集浅调用图,在每个调用堆栈的地步记录了方法的进入和退出的时间,这样把监控的影响最小化,改进了时间线的精确程度。但是,你可能想要收集完整的记录了所有方法调用的执行图。那显示未被执行方法的选项就可以满足你的要求。

获取一个未被调用方法的列表,有些方法被声明(解析)但是在你中断记录之前都没有被调用。

获取一个可延迟的方法列表,有些方法在你中断记录之前被调用了,它会显示每个方法实例化的时间和初次调用的时间之间的差值,以从最大到最小的方式排列。

在Linux和Mac OS X系统下,可以把完整的方法调用树,包含了解析和声明的时间的信息以Protocol buffer的格式保存到磁盘上的文件中,那么你可以对这些调用图进行更深入的分析,可以看后续的活动面板保存文件 以获得更多的关于文件的格式和如何从中获取数据的方法的信息。

比如:下面的截图是摄于7800ms,并且展示了在那个点上没有被调用的方法的列表, 以及它们被解析的时间:

page speed 摄于7800ms

下面的截图摄于7800ms,显示了在那个点上已被调用了的方法的列表,按照从最大到最小延迟的顺序展示;就是这些方法从解析到第一次调用的时间差从最大到最小的排序。

page-speed-6

如何记录单个页面的活动和收集完整的执行图:

  1. 启动(重启)Firefox并且关闭所有的页签;
  2. 清除浏览器的缓存;
  3. 通过在地址栏输入 about:blank 来访问一个空白页面以清除所有会被记录的浏览器活动;
  4. 选择 工具 > firebug > 打开firebug;
  5. 在Firebug窗口中,选择 Page Speed活动页签,点击下拉箭头来展示一个选项弹出菜单;
  6. 在弹出菜单中,选择完整执行视图;
  7. 点击记录活动;
  8. 访问你想要记录的页面,事件以时间线的形式被显示。

在任何时候, 做以下任意事情(会中断记录): (责任编辑:laiquliu)

关注技术,信息,资源,扫描来去留网微信二维码交流。

来去留我李俊

搜索

------分隔线----------------------------
相关栏目

热点推荐
来去留技术信息资源
来去留网为您提供平台咨询交流学习方法及各类热门技术;电器,服装,保健,行业快讯等二十几个类别的资讯