使用 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 所获得的截图：

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

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

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

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

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

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

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

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

使用 Fiddler 分析网页加载过程相关推荐

Chromium网页加载过程
Chromium加载网页的过程,需要Browser进程和Render进程协作完成.加载网页的过程由Browser进程发起,向服务器请求网页内容的过程也是由Browser进程完成.Render进程负责对 ...
关于前端性能优化问题，认识网页加载过程和防抖节流
前端性能优化-网页加载过程.性能优化方法.防抖和节流一.网页加载过程 1.加载资源的形式 2.加载资源的过程 3.渲染页面的过程 4.关于window.onload 和 DOMContentLoad ...
Spring源码分析4---IOC加载过程补充总结
原文出自:http://cmsblogs.com IOC 之获取验证模型 DTD 与 XSD 的区别 DTD(Document Type Definition),即文档类型定义,为 XML 文件的验 ...
linux优化网页加载过程,HTML页面加载和解析流程介绍
1.浏览器加载和渲染html的顺序 1.1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 1.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相 ...
linux优化网页加载过程,【zz】Linux起步过程中硬件模块的加载
[zz]Linux起步过程中硬件模块的加载 [zz]Linux起步过程中硬件模块的加载日期:2014-05-16 浏览次数:20354 次 [zz]Linux启动过程中硬件模块的加载文章来源不详. ...
webrender 查看是否开启_想要体验极致顺滑的网页加载体验？手动开启Firefox WebRender渲染引擎...
昨天我们提到火狐浏览器最新稳定版Mozilla Firefox v67 版将面向部分用户开启WebRender渲染引擎测试. 据火狐浏览器团队介绍当用户开启新的渲染引擎后 , 网页加载帧率能够从现有 ...
页面加载过程(url-＞页面)
当我们在浏览器输入URL地址开始,到web页面加载完毕,这个过程称作网页加载过程.具体如下: 在浏览器地址栏输入URL DNS域名解析发送HTTP请求服务器接收请求做出响应浏览器解析渲染页面 1 ...
模块加载过程代码分析1
一.概述模块是作为ELF对象文件存放在文件系统中的,并通过执行insmod程序链接到内核中.对于每个模块,系统都要分配一个包含以下数据结构的内存区. 一个module对象,表示模块名的一个以null ...
springboot集成mybatis源码分析-启动加载mybatis过程（二）
springboot集成mybatis源码分析-启动加载mybatis过程(二) 1.springboot项目最核心的就是自动加载配置,该功能则依赖的是一个注解@SpringBootApplicati ...
redis 启动加载mysql_Redis分析系列：启动加载过程
从本篇文章开始(命名为Redis分析系列),将会通过分析Redis的源代码(以Redis 2.2.0 RC1为准),来对它的内部实现做一些探讨.本文主要介绍Redis启动加载过程,总体上可以分为如下几 ...

使用 Fiddler 分析网页加载过程

使用 Fiddler 分析网页加载过程相关推荐

最新文章

热门文章