发送HTTP请求需要经过几个过程

域名解析--TCP连接--发送请求--等待--下载资源--解析时间

这其中需要花费一定时间，因此，尽可能的需要减少网站的HTTP请求，方法有以下几种：

1 . css精灵图

2. 图片地图

　　图片地图可以将一张图片划分成多个区域，实现点击不同区域跳转到不同链接

<body>

    <img src="./1.jpg" usemap="#map">

    <map name="map">

        <area shape="rect" coords="80,20,163,72" href="javascript:alert('眼睛')" title="眼睛">

        <area shape="rect" coords="48,116,197,186" href="javascript:alert('嘴巴')" title="嘴巴">

        <area shape="circle" coords="121,76,15" href="javascript:alert('鼻子')" title="鼻子">

    </map>

</body>

3. 合并独立CSS和JS文件

4. 图片使用Base64编码显示

　　<img src="data:image/gif;base64,这里是图片数据 ">

　　注： 数据可以用PHP生成，缺点是HTML文件大小会变大，适合小图片

网站优化--减少HTTP请求的更多相关文章

  1. 页面优化——减少HTTP请求数

    1．关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...

  2. 前端性能优化 —— 减少HTTP请求

    简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...

  3. 前端性能优化-减少http请求，dns预解析，减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  4. 前端性能优化---减少http请求数量和减少请求资源的大小

    减少http请求数量:就是资源的合并 减少http请求大小:就是资源的压缩   一.资源合并的原理:   资源不合并的缺点: 1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行 ...

  5. web前端加载优化-减少HTTP请求 （细节与办法）

    减少HTTP请求. 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个.a) 合并CSS.JavaScr ...

  6. web性能优化--减少客户端请求数（一）

    多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...

  7. 515，前端性能优化--减少http请求（待补充）

    对于影响页面呈选的因素有三个地方:服务器连接数据库并计算返回数据,http请求以及数据(文件)经过网络传输,文件在浏览器中计算渲染呈选:其中大约80%的时间都消耗在了http的请求上,所以要想大幅度的 ...

  8. 高并发WEB网站优化方案

    一.什么是高并发在互联网时代,所讲的并发.高并发,通常是指并发访问,也就是在某个时间点,有多少个访问同时到来.比如,百度首页同时有1000个人访问,那么也就是并发为1000.通常一个系统的日PV在千万 ...

  9. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

随机推荐

  1. Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  2. 【SpringBoot】支持Java1.6

    开发环境 Java 1.6; 需要修改的配置 指定java和tomcat版本 <!-- TO Support JDK 1.6 start --> <java.version>1 ...

  3. 安装包制作工具 SetupFactory 详解

    Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows 系统的注册表加入内容 ...

  4. MongoDB查询结果存放入新的Collection

    第一种方法 var lst = db.visits_201501.find({ "url":/http:\/\/m.baidu.com\/application/ }); whil ...

  5. vue-router总结

    之前写过一篇关于vue-router的文章,主要是介绍怎么结合cli2在项目中使用vue-router,比较的简单,今天想结合cli3来总结一下vue-router的具体用法. cli3 在介绍vue ...

  6. 云中树莓派（3）：通过 AWS IoT 控制树莓派上的 Led

    云中树莓派(1):环境准备 云中树莓派(2):将传感器数据上传到AWS IoT 并利用Kibana进行展示 云中树莓派(3):通过 AWS IoT 控制树莓派上的Led 云中树莓派(4):利用声音传感 ...

  7. Zabbix 课程大纲

    Zabbix 课程笔记  day1 Zabbix 安装  day1 Zabbix 添加主机 day1 Zabbix 创建监控项目 day1 Zabbix 创建触发器 day1 Zabbix 告警内容配 ...

  8. [UE4]C++中SpawnActor用法(动态创建Actor)

    转自:http://aigo.iteye.com/blog/2270177 C++中创建一个Level并添加的Runtime当中 C++中Spawn一个基于蓝图的Actor https://answe ...

  9. sas 日期比较代码备忘

    DATA A;    SET S.payrecordinfo;    YY=DATEPART(AddTime);    FORMAT YY MMDDYY10.;RUN; DATA A1;    SET ...

  10. object视频播放

    param name标签是在这个播放插件中嵌入的一些功能和播放参数: <param name="playcount" value="1"><! ...