减少HTTP请求的方式

Posted 2020-11-22 tiger4513

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请求次数，加快页面响应速度