前端讲义06__Fiddler优化页面经验,如何减少HTTP请求次数

当我们打开浏览器,在地址栏中输入URL,然后我们就看到了网页。

比如,

URL :http://gseip.ch.casetekcorp.com/gseip/

过程:实际上我们输入URL后,我们的浏览器给Web服务器发送了一个Request, Web服务器接到Request后进行处理,生成相应的Response,然后发送给浏览器, 浏览器解析Response中的HTML,这样我们就看到了网页。

加快这个页面显示,你得知道发送给浏览器有哪些内容(文件/图片等)及花费时间。

现在介绍一个工具Fiddler Web debugger

使用其统计报表得时间轴功能,可以了解到每个资源下载花费时间,其中部分时间更长,减少HTTP请求次数

我们主要优化这部分,如下图红框内所示。

前端讲义06__Fiddler优化页面经验,如何减少HTTP请求次数

PS,时间轴功能:每个网络请求都会经历域名解析、建立连接、发送请求、接受数据等阶段。把多个请求以时间作为 X 轴,用图表的形式展现出来,就形成了瀑布图。

请求条后面的图标表示响应的某些特征。如软盘图标表示这个响应正文从本地获得,也就是说服务端返回了 304;

举例

打开URL,浏览器显示的如下界面

前端讲义06__Fiddler优化页面经验,如何减少HTTP请求次数

其中传送的图片

前端讲义06__Fiddler优化页面经验,如何减少HTTP请求次数

红框内的图片可优化成一张背景图片,减少HTTP请求的次数,提高I/O性能。