1. 图片地图

缺点:坐标难定义;除了矩形之外几乎无法定义其他形状;通过DHTML(动态DOM操作)创建的图片地图在 IE 不兼容

    <img usemap="#map1" border=0 src="/images/imagemap.gif?t=1574692303">
<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

将多幅图片合并成一张单独的图,通过background-position来展示

3.内联图片

将图片的src写为 base64 格式,减小图片的请求

缺点:base64会增加图片大小,使整体下载量增加;由于是内联在页面中,跨越不同页面时不会被缓存

4. 合并脚本和样式表

将引入的js文件 和 css 文件 合并成一个文件,减少HTTP请求次数,加快页面响应速度

5.添加 Expires 头

web服务器使用Expires/头来告诉web客户端它可以使用一个组件的当前副本,直到指定时间为止

<meta http-equiv="expires" content="Sunday 26 October 2020 23:00 GMT" />

减少HTTP请求的方式的更多相关文章

  1. 高并发大流量专题---3、前端优化(减少HTTP请求次数)

    高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结 一句话总结: 图片地图:使用<map><area></area></map>标签. ...

  2. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  3. Web前端性能优化教程01:减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

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

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

  5. 减少HTTP请求之合并图片详解(大型网站优化技术)

    原文:减少HTTP请求之合并图片详解(大型网站优化技术) 一.相关知识讲解 看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在 ...

  6. CSS sprites减少HTTP请求

    使用CSS sprites减少HTTP请求   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...

  7. 使用图片地图减少HTTP请求数量

    前言 最近在看<高性能网站建设>,记录一下所学. 现在很多网站都是图片形式的导航,点击图片跳转到对应的链接.如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请 ...

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

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

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

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

随机推荐

  1. 百万年薪python之路 -- MySQL数据库之 常用数据类型

    MySQL常用数据类型 一. 常用数据类型概览 # 1. 数字: 整型: tinyint int bigint 小数: float: 在位数比较短的情况下不精确 double: 在位数比较长的情况下不 ...

  2. 让SpringBoot的jackson支持JavaBean嵌套的protobuf

    问题背景 REST 项目使用protobuf 来加速项目开发,定义了很多model,vo,最终返回的仍然是JSON. 项目中一般使用 一个Response类, public class Respons ...

  3. Alpha阶段--第六周Scrum Meeting

    任务内容 本次会议为第六周的Scrum Meeting会议 召开时间为周四上午10点,在信南B317召开,召开时间约为30分钟,进行的项目规划和分工 队员 任务 张孟宇 进行用户登录界面的代码编写 吴 ...

  4. Unity3D图像后处理特效——Depth of Field 3.4

    Depth of Field 3.4 is a common postprocessing effect that simulates the properties of a camera lens. ...

  5. Mysql 索引类型+索引方法

    MYSQL索引: PRIMARY(唯一且不能为空:一张表只能有一个主键索引). INDEX(普通索引). UNIQUE(唯一性索引). FULLTEXT(全文索引:用于搜索很长一篇文章的时候,效果最好 ...

  6. Angular工作笔记(2018/8/8)

    需求1:input标签只允许输入数字且不会出现上下选择按钮 开始设置 type="number" 客户不想要出现上下选择按钮 解决方法: 但是这种写法会有一个限制,只能输入整数,无 ...

  7. 在虚拟机上的关于Apache(阿帕奇)(3)基于IP访问网站

    这篇随笔是基于IP访问网站,和后面两篇文章基于域名和基于端口一起练习效果更好 基于IP(记得下载httpd服务) 首先使用nmtui命令为网卡添加多个ip地址  输入命令:nmtui  进入下面这个界 ...

  8. Mybaits 源码解析 (九)----- 全网最详细,没有之一:一级缓存和二级缓存源码分析

    像Mybatis.Hibernate这样的ORM框架,封装了JDBC的大部分操作,极大的简化了我们对数据库的操作. 在实际项目中,我们发现在一个事务中查询同样的语句两次的时候,第二次没有进行数据库查询 ...

  9. 单点登录 - OAuth 2.0 授权码模式(一)

    OAuth 2.0定义了四种授权方式 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentials ...

  10. 网页文件打包成.exe可执行文件

    网页文件不止可以通过浏览器打开,也可以通过打包程序打包成.exe桌面可执行程序,这样写的网页文件就可以像桌面应用一样打开了.方法如下: 工具:NW.js.Enigma Virtual Box.资源编辑 ...