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

本文介绍了在浏览器输入URL后网页显示的过程,即浏览器发送Request,Web服务器处理后返回Response,浏览器解析HTML。还介绍了使用Fiddler Web debugger的统计报表时间轴功能,了解资源下载时间,通过减少HTTP请求次数优化页面加载,如将多张图片优化成一张背景图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

比如,

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

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

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

现在介绍一个工具Fiddler Web debugger

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

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

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

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

举例

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

其中传送的图片

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值