前端性能优化

HTTP相关

指标：请求个数

• 浏览器对同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是6个
• 控制http请求的数量，减少http请求时间，达到减少网页加载和呈现的时间，能带来更好的用户体验

优化方案:

• **CSS Sprite : **将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分
• **HTML 图像地图 : **小图合并大图，从html代码的方式来控制显示区域
• **js CSS 合并 : **将多个小的js、CSS合并成一个大的js、CSS文件，间接达到减少http请求的目的

指标：组件是否压缩

• 增加CPU压缩解压缩时间来减少网络传输消耗，并且通常网络资源较cpu资源更紧张，所以对合适的对象设置压缩能个取得良好的收益

优化方案

• **压缩方法：**在http请求中设置所接受到压缩方式，在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段
• **压缩对象：**从http请求返回资源中的html，js，CSS，xml等都可以设置压缩，通常通过去掉空格和回车来压缩，再经过GZIP压缩，能达到良好的压缩效果

指标：图片格式和大小是否合适

• **图片格式：**显示效果较好的图片格式中，有webp、jpg和png24/32这几种常见的图片格式。一般来说，webp的图片最小，但在iOS或者android4.0以下的系统中可能会有兼容性问题需要解决。
• **图片尺寸：**这获取图片尺寸时候应该