前端性能优化

减少HTTP请求

合并：

如果不进行文件合并，有如下3个隐患：

1. 文件与文件之间有插入的上行请求，增加了N-1个网络延迟
2. 受丢包问题影响更严重
3. 经过代理服务器时可能会被断开

但是，文件合并本身也有自己的问题：

1. 首屏渲染问题
2. 缓存失效问题

文件合并的改进建议：

1. 公共库合并
2. 不同页面单独合并

图片处理：

1. 雪碧图(精灵技术)
   CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台。
2. Base64
   将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。
3. 使用字体图标来代替图片

减少重定向：

• 尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。
• 在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

使用缓存：

• 使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。
• 强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应

不使用CSS @import：

• CSS的@import会造成额外的请求

避免使用空的src和href：

1. a标签设置空的href，会重定向到当前的页面地址
2. form设置空的method，会提交表单到当前的页面地址

---

减少资源大小

压缩：

• HTML压缩： HTML代码压缩就是压缩在文本文件中有意义但是在HTML中不显示的字符，包括空格，制表符，换行符等
• CSS压缩： CSS压缩包括无效代码删除与CSS语义合并
• JS压缩与混乱： JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护
• 图片压缩： 针对真实图片情况，舍弃一些相对无关紧要的色彩信息

webp：

• 在安卓下可以使用webp格式的图片
• 它具有更优的图像数据压缩算法，能带来更小的图片体积
• 同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性

开启gzip

• HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。
• 大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。
• 这一般是指WWW服务器中安装的一个功能。
• 当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。
• 一般对纯文本内容可压缩到原大小的40%