Tips: 使用 Fiddler 分析网页加载过程
Fiddler 是一个http调试代理,它能够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddler 所有的“进出”的数据(指cookie,html,js,css等文件)
Fiddler2 下载地址:http://www.fiddler2.com/fiddler2/version.asp
安装好 Fiddler 并开启该软件,然后 Ie 浏览器的所有访问请求都将被 Fiddler 截获,我们会根据截获的内容进行分析
以下为全新访问(浏览器没有任何缓存数据) http://oneoo.com 所获得的截图:
软件界面上的左栏为打开该页面所产生的全部访问请求,其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据,包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。
全选左栏的请求记录,并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间:
选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间(右图)。从左图的条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化(如果是第三方网站的服务调用,可以考虑去除)。而状态栏上可查看到整个页面所需要发送的请求总数。
分析得出,我的博客首页总共有 84 个请求,其中两个比较大的图片耗时最多,全新的访客打开页面需要 9 秒时间。
现在我们点Edit菜单Remove -> All sessions 清空记录,开始分析普通访客的加载过程 ![]()
左图为用户点击链接访问,因刚才的访问已经让浏览器把大量的数据缓存下来,所以需要发送的请求数量很少,才5个,总耗时1秒。而右图为用户点击刷新按钮访问页面,因为是刷新访问,浏览器不会使用缓存数据,但会发送请求询问页面服务器浏览器上的缓存数据是否过期,所以会发送 84个请求。因为这些请求比较特殊,如果浏览器上的缓存数据跟页面服务器上的内容一致,那么服务器会返回 304 状态,而不需要重新下载内容的,所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。
综合以上的全新访问、带缓存点击访问和带缓存刷新访问,三种形式测试得出的数据,可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。
如果你觉得自己的博客打开速度慢,也可以试试用 Fiddler 来测试一下,看看到底是慢在哪个地方,做出优化
通常国外的统计代码都比较拖时间的~
Ok~ 下期将会推出 FireFox + FireBug 和 httpfox 扩展来分析网页加载过程的教程。(FeedSky 验证 ece410df)
快速链接:http://oneoo.com/go/634143.html
九月 26th, 2008 at 2:42 下午
试了一下,我的blog主页加载需要15s。
我几乎没有用特别的第三方内容,请博主看看:http://www.notii.com
这样的速度让人很不爽的说。
谢谢了。
九月 26th, 2008 at 3:04 下午
你的博客打开慢,是因为 utheme.yo2cdn.com 和 home.yo2cdn.com 所在服务器的网络质量影响到,我们已对此进行调整。
刚在测试你的博客,全新打开是在 10s 左右
九月 26th, 2008 at 3:34 下午
thanks!
九月 27th, 2008 at 11:01 上午
我这里打开首页还是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.
请问是什么原因造成的,多谢了。
九月 27th, 2008 at 11:05 上午
对不起,刚才贴乱了。总之tracert extra-00x结果超时,home是正常的。extra-00x的结果如下:
九月 27th, 2008 at 11:11 上午
对不起,刚才贴乱了。总之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。
请帮我分析一下,多谢了。
九月 27th, 2008 at 2:39 下午
哦~ 看你的信息,发现互联网出口路由是159.226.67.62,科研网的。所以访问电信的服务器比较慢,而.98 是教育网优化服务器,所以速度比较快。
请提供你电脑上的dns解析地址,我们对cdn系统进行调整优化。
九月 27th, 2008 at 5:29 下午
还是上次提到的问题,请ONEOO在看看是怎么回事???
只有进主页快,连接后台和主题服务器都很卡,PING extra-001/extra-002/extra-003.yo2cdn.com和utheme.yo2cdn.com延迟都很大.
PING结果:
http://pic.yupoo.com/gunzonline/0246964172c6/ynyh9bwj.jpg
九月 27th, 2008 at 5:39 下午
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 之间。
九月 27th, 2008 at 5:43 下午
额....那还有其它方法测试么?????
我这里真的很卡
九月 27th, 2008 at 6:03 下午
请把你的 Fiddler 测试结果完整截图给我看看
九月 27th, 2008 at 7:29 下午
开启软件无法自动检测 要怎么设置?????????
十月 6th, 2008 at 5:17 上午
选上 File 菜单的 Capture Traffic 即可
十一月 6th, 2008 at 3:30 上午