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)


Rand Posts:

已有 14 条评论发表在文章“Tips: 使用 Fiddler 分析网页加载过程”上

  1. zhang Says:

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

  2. oneoo Says:

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

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

  3. zhang Says:

    thanks!

  4. zhang Says:

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

    C:\Documents and Settings\Owner>tracert extra-002.yo2cdn.com

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

    1 8 ms10 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]
    410 ms 1 mstracert home.yo2cdn.com

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

    1 7 ms 9 ms10 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.

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

  5. zhang Says:

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

  6. zhang Says:

    对不起,刚才贴乱了。总之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:

    117 ms19 ms20 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
    1020 ms32 ms20 ms 202.97.34.70
    1120 ms20 ms20 ms 202.97.41.222
    1224 ms23 ms23 ms 58.215.66.218
    1324 ms24 ms25 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。

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

  7. oneoo Says:

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

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

  8. Qsar Says:

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

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

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

  9. oneoo Says:

    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 之间。

  10. Qsar Says:

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

  11. oneoo Says:

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

  12. Qsar Says:

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

  13. oneoo Says:

    选上 File 菜单的 Capture Traffic 即可

  14. Kida Says:

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

发表评论