减少HTTP请求的四种方式
由于HTTP1.1协议规定请求只能串行发送,也就是说一百个请求必须一次逐个发送,前面的一个请求完成才能发送下一个请求。
所以我们在开发的时候应该尽量减少HTTP请求,如下有4种方式:
1、使用图片地图
图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户单击了图片上的哪个位置
使用<map><area></area></map>标签,如:
<img usemap="#map1" border=0 src="/images/imagemap.gif?t=1517842951">
<map name="map1"><area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home"><area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts"><area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart"><area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings"><area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
</map>
2、CSS Sprites
中文翻译为CSS精灵,通过使用合并图片,通过指定CSS的background-image和background-position来显示元素,如:
<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;"><a href="javascript:alert('Home')" title="Home"><span class="home"></span></a><a href="javascript:alert('Gifts')" title="Gifts"><span class="gifts"></span></a><a href="javascript:alert('Cart')" title="Cart"><span class="cart"></span></a><a href="javascript:alert('Settings')" title="Settings"><span class="settings"></span></a><a href="javascript:alert('Help')" title="Help"><span class="help"></span></a>
</div>
#navbar span {width:31px;height:31px;display:inline;float:left;background-image:url(/images/spritebg.gif?t=1517843093);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
3、合并脚本和样式表
把多个脚本合并为一个脚本,多个样式表合并为一个样式表
4、使用Base64编码来减少页面请求数,如:
<a href="javascript:alert('Home')" title="Home"><img border=0 src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWztbW1tbe1t7e1uelMefn1ufn3ufn5+fv3u+MAO/v5+/v7/fGCPf35/f37//nYyH5BAEAAAAALAAAAAAfAB8AAAj+AAEIHEhQAoICAxImLIBAAsGHEAc6KEDAgAIJGCU4UGCgooOIESUYYJjxgQSTGE0eNOAQpMCJBhycnGmyJs2RH0E6INAQpc2ZNDEiIJDzoQSSP5MCrXmwJUEDMWs6eCDTQYQDWKdOPTkV6sOdD8KKFRvhAlYKBx4IOCBA7M6iRxE4mEt3btkDDBgcQLtWQN2hLd8uWOBgcOG7DChQ0IuWrYLChAk8AGCwwODLgxErVsyYrYMEl0nGVUC6tObNnPceSFBaQVMJAxC4lo3gNOrUaFnTHoAxNm3XVxPfRq139e8BEGAjWD5bgIALw287T8AcAXLly2kjOACdc17higXSIKDO/Lpv7Qq4bw7APgBq8eOzX69InrZ6xe3dbxZffyTGkb8tdx8F+b0Xn2sFsCSBAgTM5lp63RHYnoHUudZgRgkGOGCB+43nGk4OGcQTabKx5dyJKJ7ImoUNCaRRAZYN1ppsrT3Y2gIwyjSQBAtUpABml/0IJGYd6VjQUDH9uBFkGxGm5I8dPQaRUAQUMBdhhBV25ZYUJZBcSAtSJBddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs="></a>
减少HTTP请求的四种方式相关推荐
- curl 发送 POST 请求的四种方式
使用 curl 发送 POST 请求的四种方式: application/x-www-form-urlencoded 使用实例 $ curl localhost:3000/api/basic -X P ...
- Post请求的四种方式
Post请求四种传送方式的Python实现 HTTP 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式.常见的四种编码方式如下: ♦ ...
- Java 实现HTTP请求的四种方式总结
前言 在日常工作和学习中,有很多地方都需要发送HTTP请求,本文以Java为例,总结发送HTTP请求的多种方式 HTTP请求实现过程 GET ▶️①.创建远程连接 ▶️②.设置连接方式(get.pos ...
- java发送http请求的四种方式
自己对知识的总结 4种分别可发送get和post请求的方法, 第1种:HttpURLConnection. 第2种:URLConnection. 第3种:HttpClient,,HttpClient常 ...
- android java 多线程,Android多线程的四种方式
当我们启动一个App的时候,Android系统会启动一个Linux Process,该Process包含一个Thread,称为UI Thread或Main Thread.通常一个应用的所有组件都运行在 ...
- JDBC 连接数据库的四种方式
JDBC 连接数据库的四种方式 每博一文案 师傅说,人这一辈子总有许多遗憾,许多无可奈何. 其实有些事情不用太过执着,放下牵绊你的生活无畏执念,你会收获一个更为广阔的天地. 想开,看开,放开这六个字, ...
- 实现Web端即时通讯的四种方式
Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的.但是在Web中,由于浏览器的限制,实现即 ...
- 详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
- 解决存储过程中数据安全问题的四种方式
随着科技的不断发展,数据量也正在呈指数倍的增加.在这样一个大背景下,存储产品成为了时下市场中最热的产品.而数据的安全性也变得尤为重要.后端存储已经逐渐成为企业业务系统的核心和关键. 一般而言,我们有四 ...
最新文章
- Linux 下安装cnpm淘宝镜像命令npm
- python程序员一天写多少行代码-这个工具,30分钟居然把我一天的工作给干完了!...
- 7-27 家谱处理 (30 分)(详解+map做法)map真香啊
- mybatisplus 结果_SpringBoot + MyBatisPlus 快速入门
- 如何利用System.Net.Mail类发送EMAIL
- 高德软件有限公司python试题 及 答案
- 情人节海报模板,甜到牙疼!
- jQuery的表单验证
- File类与FileInfo类
- PTA 程序设计天梯赛(61~80题)
- ECMall插件——余额支付
- 使用AOMEI无损数据的动态磁盘转基本磁盘
- Cortex-M3 (NXP LPC1788)之UART用法
- js简单图解冒泡排序
- 定量数据和定性数据_定性数据:赋予大数据意义的上下文
- 美团2015年校园招聘部分笔试题
- 增长黑客读书笔记(一)搭建增长团队
- java Runtime.exec方法详解
- 一个阿里前端工程师的成长之路
- 运动耳机有必要买吗、口碑最好的运动耳机品牌排行
热门文章
- 2021年成都列五高中高考成绩查询,2021年成都高考各高中成绩及本科升学率数据排名及分析...
- 气化及燃烧相关知识点
- 推荐:孙梦迪 张子默 张子衡
- 搜索新风口与营销新变量
- 解决:无法访问此网站网址为 https://weread.qq.com/ 的网页可能暂时无法连接,或者它已永久性地移动到了新网址。 ERR_INSUFFICIENT_RESOURCES
- vnc连接linux服务器实现与windows文件互传
- java实现输入日期
- Pspice——RC时间常数
- php跨平台审计工具,php源码审计工具–PHP Source Auditor 4 released
- 负载测试、压力测试和性能测试的异同