性能优化

作为前端工程师，性能优化这个话题，老生常谈，是一个不会过时的话题，无论我们在工作中还是面试中会经常遇到它。随着移动互联网的快速发展，用户体验变得越发重要，接下来我将结合自己工作中的实践，简单记录一下关于性能优化可以做的事情。

一、在设计上减少HTTP请求

一个网站的用户体验，浏览器跟服务器的http请求时间占到80%以上。如果我们在跟后台对接的时候，在实现需求的前提下，减少接口数量即可大大提升用户体验。

二、HTTP请求环节上

1.网络传输性能优化

贴上如下这张经典图，介绍了浏览器跟服务器通讯过程：

如上图我们可以看出，浏览器在得到用户请求之后，经历了下面这些阶段：重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成，我们做优化其实就是对这些环节做相应处理。

1.1 浏览器缓存

浏览器在向服务器发起请求前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存，我们先看看浏览器处理缓存的策略：

浏览器默认的缓存是放在内存内的，内存里的缓存会因为进程的结束或者说浏览器的关闭而被清除，而存在硬盘里的缓存才能够被长期保留下去。在服务器上设置的Etag字段，在浏览器接收到服务器响应后，会检测响应头部（Header），如果有Etag字段，那么浏览器就会将本次缓存写入硬盘中。

在我们配置缓存时一定要切记，浏览器在处理用户请求时，如果命中强缓存，浏览器会直接拉取本地缓存，不会与服务器发生任何通信，也就是说，如果我们在服务器端更新了文件，并不会被浏览器得知，就无法替换失效的缓存。所以我们在打包阶段，可以借助webpack在打包后的文件名后面加上 hash值，避免资源更新而引起的前后端文件无法同步的问题。

1.2 开启 Gzip 传输

针对一些接口开启Gzip传输压缩，它能将我们的文本类文件体积再压缩，效果立竿见影，但不要对图片文件进行Gzip压缩，会有反效果，图片进行压缩后会占用后台大量资源。

1.3 webpack配置优化

前面所作的浏览器缓存工作，只有在用户第二次访问我们的页面才能起到效果，如果要在用户首次打开页面就实现优良的性能，必须对资源进行优化。

目前webpack是前端最火的自动化工程构建工具，我目前所作项目的工程化都是基于webpack,接下来我将结合webpack的配置，说一下对资源的优化,目前这个webpack的版本是3.12.0。

uglifyJsPlugin 用来对js文件进行压缩，从而减小js文件的大小，加速load速度：

HTML压缩：

提取css样式，并压缩：

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载：

1.4 图片资源优化

webpack资源打包压缩只是在代码层面，而在我们实际开发中，图片的加载占用了大量的网络资源，对图片进行优化，会有良好的效果。

雪碧图：

把多张图片放在一起，减少了网络请求，同时相对于每张单独图片加起来的体积更小，可以通过 css 属性 background-position 对需要的图片进行定位 。

字体图标：

图片可以做的很多事情，矢量图也可以做，而且它只是往HTML里插入字符和CSS样式而已，和图片请求比起来资源占用完全不在一个数量级，如果你的项目里有小图标，可以用矢量图。

图片懒加载（延迟加载）：

　　目的为了，减少页面第一次加载过程中http的请求次数。

　　具体步骤：

　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图

　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息

1.5 使用CDN

CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求,大大提升网络传输速度。