1、减少HTTP请求
1.1、图片地图
如果一个导航栏上由五幅图片，点击一个图片会跳转响应的页面 这时会有5个http请求
可以使用图片地图使用一张图片在响应跳转位置进行映射跳转到响应的位置，这时减少了4个http请求
优点：减少HTTP请求，图片中的子元素图片需要和设计图一致，不可随意排列
缺点：在定义图片地图上的区域坐标时，容易出错，并且响应式兼容也是个问题
1.2、CSS Sprites （CSS 精灵）
和图片地图一样，CSS Sprites也可以合并图片，但更为灵活。将多个图片合并到一个单独的图片中，将图片设置为背 景图片，利用background-position属性，可以将HTML元素放置在背景图片中期望的位置上
图片地图中的子图片元素的位置是不可改变的需要和设计图上一致，而CSS Sprites则没有这个限制，只需要改变背景 图片的偏移量等属性即可
优点：减少HTTP请求，相对于图片地图更加灵活，降低下载量（很多人会认为合并之后的图片会比分离的图片的总和要 大，因为合并的图片中包含有许多空白区域，实际上，合并后的图片会比分离的图片的总和要小，这是因为它降低 了图片自身的开销，如颜色表，格式信息等等）
缺点：响应问题不好解决，容易出现图片位置偏差的情况
1.3、内联图片
通过data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。尽管IE8以下不支持，IE8以上支持但是 大小有限制，但它能给其他浏览器带来的节省使得它值得关注
data:URL模式在1995年被首次提议规范对它的描述为：“允许将小块数据内联为‘立即数’”。数据就在其URL自身之中， 其格式如下
data:[<mediatype][;base64],<data>
目前通常是使用base64图片以下是它的优缺点
优点：减少HTTP请求
缺点：根据base64的编码原理，大小比原文件大3/1，如果将图片放到html中里面会减慢首屏加载，图片不回被缓存（但是 可以将图片放在css中通过背景图片的方式访问，文件大小还是个问题）
代码比较丑，大量的编码字符，大量的图片插入编辑器可能会卡死（当然也可以通过构建工具动态插入）
总的来说这个得权衡使用，数量个文件大小上都需要限制，个别小的图片还可以，大的就不行了
1.4、合并脚本和样式表
如今的很多网站都使用了JavaScript和CSS。前端工程师必须选择是对JavaScript和CSS、进行“内联”还是外联。一般来说使用外部脚本