Tips: 使用 Fiddler 分析网页加载过程

Fiddler 是一个http调试代理,它能够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddler 所有的“进出”的数据(指cookie,html,js,css等文件)

引用自:HTTP调试工具:Fiddler介绍一(翻译)

   Fiddler2 下载地址:http://www.fiddler2.com/fiddler2/version.asp

  安装好 Fiddler 并开启该软件,然后 Ie 浏览器的所有访问请求都将被 Fiddler 截获,我们会根据截获的内容进行分析:) 以下为全新访问(浏览器没有任何缓存数据) http://oneoo.com 所获得的截图:

fiddler-tips-01.gif fiddler-tips-02.gif

  软件界面上的左栏为打开该页面所产生的全部访问请求,其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据,包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。

  全选左栏的请求记录,并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间:

fiddler-tips-03.gif fiddler-tips-04.gif

   选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间(右图)。从左图的条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化(如果是第三方网站的服务调用,可以考虑去除)。而状态栏上可查看到整个页面所需要发送的请求总数。

  分析得出,我的博客首页总共有 84 个请求,其中两个比较大的图片耗时最多,全新的访客打开页面需要 9 秒时间。

  现在我们点Edit菜单Remove -> All sessions 清空记录,开始分析普通访客的加载过程 :)

 fiddler-tips-05.gif fiddler-tips-06.gif

   左图为用户点击链接访问,因刚才的访问已经让浏览器把大量的数据缓存下来,所以需要发送的请求数量很少,才5个,总耗时1秒。而右图为用户点击刷新按钮访问页面,因为是刷新访问,浏览器不会使用缓存数据,但会发送请求询问页面服务器浏览器上的缓存数据是否过期,所以会发送 84个请求。因为这些请求比较特殊,如果浏览器上的缓存数据跟页面服务器上的内容一致,那么服务器会返回 304 状态,而不需要重新下载内容的,所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。

  综合以上的全新访问、带缓存点击访问和带缓存刷新访问,三种形式测试得出的数据,可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。

  如果你觉得自己的博客打开速度慢,也可以试试用 Fiddler 来测试一下,看看到底是慢在哪个地方,做出优化 :D 通常国外的统计代码都比较拖时间的~

  Ok~ 下期将会推出 FireFox + FireBug 和 httpfox 扩展来分析网页加载过程的教程。(FeedSky 验证 ece410df)

  • http://www.notii.com zhang

    试了一下,我的blog主页加载需要15s。
    我几乎没有用特别的第三方内容,请博主看看:http://www.notii.com
    这样的速度让人很不爽的说。
    谢谢了。

  • oneoo

    [Comment ID #284626 Will Be Quoted Here]

    你的博客打开慢,是因为 utheme.yo2cdn.com 和 home.yo2cdn.com 所在服务器的网络质量影响到,我们已对此进行调整。

    刚在测试你的博客,全新打开是在 10s 左右

  • http://www.notii.com zhang

    [Comment ID #284629 Will Be Quoted Here]
    thanks!

  • http://www.notii.com zhang

    我这里打开首页还是15s以上,后台更慢,20s以上。
    以下是ping extra-001/extra-002/extra-003.yo2cdn.com的结果,三个类似,只贴一个:

    C:Documents and SettingsOwner>tracert extra-002.yo2cdn.com

    Tracing route to extra-002.yo2cdn.com [58.215.79.22]
    over a maximum of 30 hops:

    1 8 ms 10 ms 9 ms 10.0.40.1
    2 <1 ms <1 ms <1 ms 172.16.100.1
    3 <1 ms <1 ms <1 ms router1-1.ioz.ac.cn [159.226.67.62]
    4 10 ms 1 ms tracert home.yo2cdn.com

    Tracing route to home.yo2cdn.com [60.28.222.98]
    over a maximum of 30 hops:

    1 7 ms 9 ms 10 ms 10.0.40.1
    2 <1 ms <1 ms <1 ms 172.16.100.1
    3 1 ms <1 ms <1 ms router1-1.ioz.ac.cn [159.226.67.62]
    4 1 ms 4 ms 6 ms 192.168.47.46
    5 1 ms 1 ms 3 ms 8.200 [159.226.254.185]
    6 1 ms 1 ms * 8.194 [159.226.254.18]
    7 1 ms * 1 ms 219.158.34.53
    8 1 ms 1 ms 1 ms 219.158.22.161
    9 4 ms 5 ms 5 ms 219.158.6.162
    10 4 ms 4 ms 5 ms 202.99.66.162
    11 5 ms 4 ms 5 ms 60.28.31.106
    12 5 ms 6 ms 4 ms 60.28.253.122
    13 5 ms 5 ms 4 ms 60.28.222.98

    Trace complete.

    请问是什么原因造成的,多谢了。

  • http://www.notii.com zhang

    对不起,刚才贴乱了。总之tracert extra-00x结果超时,home是正常的。extra-00x的结果如下:

  • http://www.notii.com zhang

    对不起,刚才贴乱了。总之tracert extra-00x.yo2cdn结果超时,home.yo2cdn是正常的。

    extra-00x的结果如下:

    Tracing route to extra-002.yo2cdn.com [58.215.79.22]
    over a maximum of 30 hops:

    1 17 ms 19 ms 20 ms 10.0.40.1
    2 <1 ms <1 ms <1 ms 172.16.100.1
    3 <1 ms 1 ms 1 ms router1-1.ioz.ac.cn [159.226.67.62]
    4 <1 ms <1 ms 1 ms 192.168.47.46
    5 1 ms <1 ms <1 ms 8.200 [159.226.254.185]
    6 1 ms 1 ms 1 ms 8.194 [159.226.254.74]
    7 1 ms 1 ms 1 ms 219.142.17.37
    8 1 ms 1 ms 1 ms bj141-131-17.bjtelecom.net [219.141.131.17]
    9 1 ms 1 ms 2 ms 202.97.57.209
    10 20 ms 32 ms 20 ms 202.97.34.70
    11 20 ms 20 ms 20 ms 202.97.41.222
    12 24 ms 23 ms 23 ms 58.215.66.218
    13 24 ms 24 ms 25 ms 58.215.69.2
    14 * * * Request timed out.
    15 * * * Request timed out.
    16 * * * Request timed out.
    17 * * * Request timed out.
    18 * * * Request timed out.
    19 * * * Request timed out.
    20 * * * Request timed out.
    以下全是timed out。

    请帮我分析一下,多谢了。

  • http://oneoo.com oneoo

    哦~ 看你的信息,发现互联网出口路由是159.226.67.62,科研网的。所以访问电信的服务器比较慢,而.98 是教育网优化服务器,所以速度比较快。

    请提供你电脑上的dns解析地址,我们对cdn系统进行调整优化。

  • http://gunzonline.yo2.cn Qsar

    还是上次提到的问题,请ONEOO在看看是怎么回事???

    只有进主页快,连接后台和主题服务器都很卡,PING extra-001/extra-002/extra-003.yo2cdn.com和utheme.yo2cdn.com延迟都很大.

    PING结果:
    http://pic.yupoo.com/gunzonline/0246964172c6/ynyh9bwj.jpg

  • http://oneoo.com oneoo

    [Comment ID #284697 Will Be Quoted Here]

    13 24 ms 24 ms 25 ms 58.215.69.2
    14 * * * Request timed out.
    这样的 trace 结果不代表访问速度慢的,在 58.215.69.2 路由已经进入了服务器所在机房的出口路由。因为内部的服务器有防火墙,禁止了 ping 和 trace 所以没有回复,导致 trace 时会显示 timeout 。但通信是顺畅的,我们依据进入机房的路由可以看到速度在 30~50ms 之间。

  • http://gunzonline.yo2.cn Qsar

    额….那还有其它方法测试么?????
    我这里真的很卡

  • http://oneoo.com oneoo

    [Comment ID #284699 Will Be Quoted Here]

    请把你的 Fiddler 测试结果完整截图给我看看

  • http://gunzonline.yo2.cn Qsar

    开启软件无法自动检测 要怎么设置????????? :oops:

  • oneoo

    [Comment ID #284705 Will Be Quoted Here]

    选上 File 菜单的 Capture Traffic 即可

  • http://www.yokida.cn Kida

    :? 持续关注实际网通服务器接入速度的改善….