网站优化--减少HTTP请求
发送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请求的更多相关文章
- 页面优化——减少HTTP请求数
1.关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...
- 前端性能优化 —— 减少HTTP请求
简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...
- 前端性能优化-减少http请求,dns预解析,减少repaint和reflow
前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...
- 前端性能优化---减少http请求数量和减少请求资源的大小
减少http请求数量:就是资源的合并 减少http请求大小:就是资源的压缩 一.资源合并的原理: 资源不合并的缺点: 1.文件和文件之间有插入请求----请求a.js,b.js,c.js(三行 ...
- web前端加载优化-减少HTTP请求 (细节与办法)
减少HTTP请求. 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个.a) 合并CSS.JavaScr ...
- web性能优化--减少客户端请求数(一)
多图标合并,用css分隔 设置较长时间的过期时间 合并多个css文件 合并多个js文件 根据域名划分内容 首先介绍一款速度测试工具:webpagetest(填上url,username,passwor ...
- 515,前端性能优化--减少http请求(待补充)
对于影响页面呈选的因素有三个地方:服务器连接数据库并计算返回数据,http请求以及数据(文件)经过网络传输,文件在浏览器中计算渲染呈选:其中大约80%的时间都消耗在了http的请求上,所以要想大幅度的 ...
- 高并发WEB网站优化方案
一.什么是高并发在互联网时代,所讲的并发.高并发,通常是指并发访问,也就是在某个时间点,有多少个访问同时到来.比如,百度首页同时有1000个人访问,那么也就是并发为1000.通常一个系统的日PV在千万 ...
- 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...
随机推荐
- 【nginx】之常用命令
查看版本号: nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试ngi ...
- MongoDB查询结果存放入新的Collection
第一种方法 var lst = db.visits_201501.find({ "url":/http:\/\/m.baidu.com\/application/ }); whil ...
- checked和stop()的讲解
input:cheacked (属性选择器): checked 选中复选框 $("p").stop(ture); 代码的翻译:(参数)布尔值 p身上所有的动画都停止了 加不加tr ...
- ubuntu下修改mysql默认data路径
由于ubuntu默认的mysql路径是在/var/lib/mysql下,很多时候我们如果没有挂载其它分区在/var的时候,随着网站逐渐浏览和添加内容,数据容量也会越来越大,自然磁盘空间也会比较吃紧.因 ...
- Retrofit 使用方法
public class MainActivity extends Activity { private ListView mListView; //private ImageListAdapter ...
- python常用模块: random模块, time模块, sys模块, os模块, 序列化模块
一. random模块 import random # 任意小数 print(random.random()) # 0到1的任意小数 print(random.uniform(-10, 10)) # ...
- Jmeter(十九)Logic Controllers 之 Module Controller and Include Controller
Module Controller ---模块控制器 测试计划设置“独立运行没每个线程组” 线程组2中使用Module Controller执行线程组1中的Sampler: 紧接着,将线程组1disa ...
- 高可用hadoop的hdfs启动的时候namenode启动不了
启动的时候,一直要求输入namenode密码: 查看namenode的日志如下: 2019-03-28 18:38:08,961 INFO org.apache.hadoop.ipc.Client: ...
- androidstudio在创建new project时,窗口太大,看不到下面确定按钮的解决方法
点击File-->setting-->Appearance将里面的Override default fonts by(not recommended)打钩去掉. 这个是目前找到唯一办法.
- Android 通过联系人姓名查询联系人号码
<!-- 读联系人权限 --><uses-permission android:name="android.permission.READ_CONTACTS" / ...