使用 Fiddler 分析网页加载过程
2011-08-09 09:30
246 查看
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 所获得的截图:
软件界面上的左栏为打开该页面所产生的全部访问请求,其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据,包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。
全选左栏的请求记录,并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间:
选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间(右图)。从左图的条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化(如果是第三方网站的服务调用,可以考虑去除)。而状态栏上可查看到整个页面所需要发送的请求总数。
分析得出,我的博客首页总共有 84 个请求,其中两个比较大的图片耗时最多,全新的访客打开页面需要 9 秒时间。
现在我们点Edit菜单Remove -> All sessions 清空记录,开始分析普通访客的加载过程
左图为用户点击链接访问,因刚才的访问已经让浏览器把大量的数据缓存下来,所以需要发送的请求数量很少,才5个,总耗时1秒。而右图为用户点击刷新按钮访问页面,因为是刷新访问,浏览器不会使用缓存数据,但会发送请求询问页面服务器浏览器上的缓存数据是否过期,所以会发送 84个请求。因为这些请求比较特殊,如果浏览器上的缓存数据跟页面服务器上的内容一致,那么服务器会返回
304 状态,而不需要重新下载内容的,所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。
综合以上的全新访问、带缓存点击访问和带缓存刷新访问,三种形式测试得出的数据,可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。
如果你觉得自己的博客打开速度慢,也可以试试用 Fiddler 来测试一下,看看到底是慢在哪个地方,做出优化 通常国外的统计代码都比较拖时间的~
引用自:HTTP调试工具:Fiddler介绍一(翻译)
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 来测试一下,看看到底是慢在哪个地方,做出优化 通常国外的统计代码都比较拖时间的~
相关文章推荐
- Tips: 使用 Fiddler 分析网页加载过程 | oneoo's 私家花园
- 游览器加载渲染网页过程分析
- WebView打开网页,设置支持Javascript,浏览的网页后退而不是退出浏览器,判断页面加载过程,缓存的使用
- iOS: 显示网页的加载过程(MBProgressHUD的使用)
- Chromium网页URL加载过程分析
- Chromium网页URL加载过程分析
- 从输入网址到显示网页的全过程分析
- 【spring源码分析】加载bean过程(1)
- Android4.4 Framework分析——Android默认Home应用Launcher3的加载过程分析
- Android系统Recovery工作原理之使用update.zip升级过程分析(一)
- 从输入网址到显示网页的全过程分析
- 使用Fiddler对iPhone苹果手机进行数据抓包分析
- 使用java命令运行class文件提示“错误:找不到或无法加载主类“的问题分析
- Oracle数据库中分析函数的使用过程
- JDBC中驱动加载的过程分析(上)
- Web服务器使用JSP来创建网页的过程
- 【Fiddler】(二) - 使用Fiddler做抓包分析
- 使用WebView, WebChromeClient和WebViewClient加载网页
- IniWebEnvironment中的WebSecurityManager加载过程分析