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. [AHOI2002]哈利·波特与魔法石

    这道题比较简单,就是一个最短路(SSSP).数据水,用Floyd即可AC.这里用了Dijkstra. #include <iostream> #include <cstdio> ...

  2. win7重装系统经验总结报告(2013年6月29日凌晨1:45)

    win7重装系统经验总结报告(2013年6月29日凌晨1:45) 步骤: 1.考虑被重做的电脑是否有重要文件在C盘.有则转移到D盘等非系统盘. 2.看该电脑是2GB内存还是4GB以上内存. 3.准备好 ...

  3. Java并发编程之线程池的使用

    1. 为什么要使用多线程? 随着科技的进步,现在的电脑及服务器的处理器数量都比较多,以后可能会越来越多,比如我的工作电脑的处理器有8个,怎么查看呢? 计算机右键--属性--设备管理器,打开属性窗口,然 ...

  4. 基于TORCS和Torch7实现端到端连续动作自动驾驶深度强化学习模型(A3C)的训练

    基于TORCS(C++)和Torch7(lua)实现自动驾驶端到端深度强化学习模型(A3C-连续动作)的训练 先占坑,后续内容有空慢慢往里填 训练系统框架 先占坑,后续内容有空慢慢往里填 训练系统核心 ...

  5. Apache2的安装

    Apache2的安装 1.执行:sudo apt-get install apache2. 2.sudo vim /etc/apache2/apache2.conf在最后加上:ServerName l ...

  6. 设计模式C++描述----05.职责链(Chain of Responsibility)模式

    一. 概述 职责链模式: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 二. 举个例子 员工要求加薪 ...

  7. egg-middleware 中间件

    Middleware 中间件 Egg 的中间件形式和 Koa 的中间件形式是一样的,都是基于洋葱圈模型.每次我们编写一个中间件,就相当于在洋葱外面包了一层. 编写中间件 写法 我们先来通过编写一个简单 ...

  8. Mongoose 基本用法

    1. SchemaTypes数据类型 数据类型 描述 String 字符串 Number 数字 Date 日期 Boolean 布尔值 Mixed 混合 Objectid 对象ID Array 数组 ...

  9. MySQL的sleep函数的特殊特现象

      MySQL中的系统函数sleep,实际应用的场景不多,一般用来做实验测试,昨天在测试的时候,意外发现sleep函数的一个特殊现象.如果在查询语句中使用sleep函数,那么休眠的时间跟返回的记录有关 ...

  10. Lost My Music:倍增实现可持久化单调栈维护凸包

    题目就是求树上每个节点的所有祖先中(ci-cj)/(dj-di)的最小值. 那么就是(ci-cj)/(di-dj)的最大值了. 对于每一个点,它的(ci,di)都是二维坐标系里的一个点 要求的就是祖先 ...