前端性能优化总结：
1.减小 HTTP 请求数
前端开发80%以上的响应时间浪费在图片、样式、脚本等资源上传下载上，然而大多资源是必不可少的，咱们减小 HTTP 请求数从如下方面进行：css
①合并文件（JS/CSS文件/图片）前端
合并图片，当图片较多时，经过合并为一张大图，不只能减小http请求数，还能利用缓存来提高性能。web
合并CSS、JS文件，例如3个css文件可能会发出3此请求，用户等待时间较长，合并以后只须要发出一次请求，节省请求时间，加快页面的加载，用户体验感上升。浏览器
②行内图片（Base64 编码）缓存
用 data: URL模式来把图片嵌入页面，会增长HTML文件的大小，经过编码的字符串将图片内嵌到网页文本中，会有效减小页面的大小。性能优化
③缓存策略服务器
友好充分利用缓存，经过在请求头设置缓存属性，下次再次访问能够直接从本地获取资源，减小了没必要要的数据传输，节省带宽、减小服务器的负担，提高网站性能、加快了客户端加载网页的速度。Expires 设置了一个时间，只要在这个时间以前，浏览器都不会请求文件，而是直接使用缓存。cache-control设置过时时间长度（秒），在这个时间范围内，浏览器就会直接读取缓存，当expires和Cache-Control都存在时，Cache-Control的优先级更大。网络
- 对于静态组件：经过设置一个遥远的未来时间做为
Expires来实现永不失效 - 多余动态组件：用合适的
Cache-ControlHTTP 头来让浏览器进行条件性的请求
2.使用CDN
CDN即内容分发网络，它是一组分布在多个不一样地理位置的 Web 服务器，可使用户就近取得所需内容，解决网络拥挤的情况，提升用户访问网站的响应速度。app
3.优化资源加载位置
将 CSS 放在文件头部，JavaScript 文件放在底部，全部放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。若是这些 CSS 和 JS 加载和解析时间长，页面显示就是空白，将JS 文件要放在底部，会先解析HTML以后在解析JS。而CSS 文件还要放在头部，能够避免没有数据的页面被用户看到，体验很差。JS 文件若是想要放在头部，只要给 script 标签加上 defer 属性就能够了，异步下载，延迟执行。异步
4.开启GZIP
Gzip即数据压缩，用于压缩使用Internet传输的全部文本资源。将资源在服务端进行压缩，而后发送给浏览器后再进行解压，这样会下降文件传输大小，提升网页加载性能。开启GZIP的方法，到对应的web服务配置文件中设置。以Apache为例，在配置文件httpd.conf中添加：Accept-Encoding: gzip,deflate
例如，用 Vue 开发的项目构建后生成的 app.js 文件大小为 3.5MB，使用 Gzip 压缩后只有 1.4Mb。
5.图片优化
①尽量的使用PNG格式的图片，它相对来讲体积较小。
②对于不一样格式的图片，在上线以前最好进行必定的优化。
③图片的延迟加载（懒加载）
在页面中，先不给图片设置路径，只有当图片出如今浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。
④响应式图片
浏览器可以根据屏幕大小自动加载合适的图片。例如展现50*50大小的图片，用的是500*500的，应该展现适合的图片。
⑤下降图片质量
下降图片质量，图片100% 的质量和 90% 的质量一般看不出来区别，适当下降图片质量，不会影响页面展现。
⑥利用 CSS3 效果代替图片
CSS画的图片一般是原图图片大小的几分之一甚至几十分之一。有不少图片使用 CSS 效果（渐变、阴影等）就能画出来，这种状况选择 CSS3 效果更好。