减少HTTP请求的方式
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请求的方式的更多相关文章
- 高并发大流量专题---3、前端优化(减少HTTP请求次数)
高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结 一句话总结: 图片地图:使用<map><area></area></map>标签. ...
- 使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
- Web前端性能优化教程01:减少Http请求
性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...
- 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...
- 减少HTTP请求之合并图片详解(大型网站优化技术)
原文:减少HTTP请求之合并图片详解(大型网站优化技术) 一.相关知识讲解 看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在 ...
- CSS sprites减少HTTP请求
使用CSS sprites减少HTTP请求 sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...
- 使用图片地图减少HTTP请求数量
前言 最近在看<高性能网站建设>,记录一下所学. 现在很多网站都是图片形式的导航,点击图片跳转到对应的链接.如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请 ...
- 前端性能优化 —— 减少HTTP请求
简要:对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选: 其中大约80%的时间都耗在了http请求上,所 ...
- 页面优化——减少HTTP请求数
1.关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...
随机推荐
- sql查询入门
SQL语言是一门相对来说简单易学却又功能强大的语言,它能让你快速上手并很快就能写出比较复杂的查询语句.但是对于大多数开发者来说,使用SQL语句查询数据库的时候,如果没有一个抽象的过程和一个合理的步骤, ...
- ESP32 开发之旅① 走进ESP32的世界 安装开发环境
1.前言 欢迎大家来到ESP32的世界,从现在开始,笔者将带领大家慢慢揭开ESP32神秘的面纱. 在学习ESP32之前,博主希望读者能有ESP8266的学习基础(ESP32 Wifi模 ...
- SpringBoot系列教程之Bean之指定初始化顺序的若干姿势
上一篇博文介绍了@Order注解的常见错误理解,它并不能指定 bean 的加载顺序,那么问题来了,如果我需要指定 bean 的加载顺序,那应该怎么办呢? 本文将介绍几种可行的方式来控制 bean 之间 ...
- 【Spring Cloud】微服务架构选型方案
1.技术架构 2.组件介绍 1.服务注册与发现——Eureka 服务注册与发现中心采用Eureka,以AP为核心的高可用注册中心,保证高可用性和最终一致性,server之间互相注册的replicate ...
- OptimalSolution(1)--递归和动态规划(3)数组和字符串问题
一.最长递增子序列(LIS) 给定数组arr,返回arr的最长递增子序列.例如,arr={2,1,5,3,6,4,8,9,7},返回的最长递增子序列为{1,3,4,5,8,9} 1.时间复杂度为O(N ...
- TCP/IP和Socket开发经验分享
当前与网络相关的业务主要是基于tcp/ip或http,熟悉j2ee的同学一定会对http场景下的开发比较了解.但是,精通tcp/ip以及如何构建一个直接基于tcp/ip层通讯的知识却不太多见.恰巧,最 ...
- linux文本编辑器教学
linux常见服务 一. 文本编辑器 vi vim是vi增强版 vim需要安装 sudo apt-get -y install vim 1 vim的三种工作模式 1 编辑模式 命令模式=>编辑模 ...
- python3 自己写的一个小算法(比对中文文本相似度)
函数使用说明: 函数的三个参数分别是“匹配语句”,“匹配语料”,“相关度”: 匹配语句,和匹配预料中的语句匹配的语句,必须为字符串: 匹配语料,被匹配语句来匹配的语句列表,必须为列表: 相关度,函数只 ...
- Jenkins 2.60.x 2种发送邮件方式
1.1 默认发邮件的配置方式 1.1.1 系统级别 邮件配置 1.1.2 项目级别 邮件配置 测试构建失败是否会发邮件: 控制台输出:提示已发送邮件给项目配置指定的两个邮箱地址. 1.1.2.1 查 ...
- 使用VM虚拟机安装Linux系统详细流程
最近新换了个电脑,所以需要重新安装虚拟机和Linux系统,话不多说,看流程吧 1.安装vm,这个就不说了,打开VM 2.点击安装虚拟机 3.选择自定义安装 4.选择稍后安装 5.选择要安装的系统 6. ...