使用图片地图减少HTTP请求数量
2018-06-24 01:59:24来源：未知 阅读 ()
前言
最近在看《高性能网站建设》，记录一下所学。
现在很多网站都是图片形式的导航，点击图片跳转到对应的链接。如果导航项目很多的话，图片的数量就会很多，每需要加载一张图片就会多一个HTTP请求。优化的方式之一就是使用图片地图
标签
图片地图要用到map和area标签
map标签用于客户端的图片映射；area标签指定映射区域。兼容性良好，可放心使用
栗子
<aside class="container"> <img src="src/img_map.png" alt="导航图片" usemap="#nav_test"> <map name="nav_test"> <area shape="rect" coords="0 0 300 110" href="https://www.so.com/" target="_blank" alt="360搜索"> <area shape="rect" coords="0 110 300 212" href="https://www.baidu.com/" target="_blank" alt="百度搜索"> </map> </aside>
img的usename可指定所使用的映射，对应map的name属性
area的shape属性规定形状（default|rect|circle|poly）；coords属性规定区域，不同的shape时，coords的格式也不一样（栗子中shape为矩形，coords就指定了矩形左上角和右下角的坐标，单位为px . ps:在html4的时候还可以是百分比，但是html5貌似只能是数值）；href和target、alt就和a标签的一样
一张图片就对应了两个不同的链接，而只有一个http请求，减少了一个请求了。如果导航很多的情况下，减少的请求数量就会很可观。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：git恢复删除的分支及内容
下一篇：html5 移动适配写法
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 通配符选择器 2020-05-27
- ECharts安装与使用 2020-05-26
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
