前端优化三大方案

一、减少 HTTP 的请求次数和传输报文的大小

1、CSS SPRITE（雪碧图、图片精灵）技术

2、使用字体图标（ICON FONT）或者 SVG 等矢量图

    1.会减少 HTTP 请求次数或者减少请求内容的大小
    2.渲染更快：因为他们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码再渲染
    3.不容易失真变形
    4.也可以使用 webp 格式图片，这种格式要小一些（但是需要服务器端支持这种格式的请求处理）

3、图片懒加载（延迟加载）技术

    1.在第一次加载时候不给真实地址、图片，提高了第一次渲染页面的速度
    2.当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载（节约流量，也能减少对服务器的请求压力） 
    3.对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）

4、音视频文件取消预加载（preload='none'），增加第一次渲染页面的速度

5、客户端和服务器端的数据传输尽可能基于 JSON 格式完成，因为XML 格式比 JSON 格式要大一些（还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多）

6、把页面中的 CSS/JS/图片等文件进行合并压缩

    合并：争取 CSS 和 JS 都只导入一个（webpack 可以实现自动合并压缩） 
    压缩：基