前端性能优化

背景：对于前端项目应用来说，用户体验是首先要考虑的事情，接下来将从几个方面来介绍如何优化应用性能。

1. 减少http请求数量

由于现代浏览器并发请求的数量为5~6个，每次构建http请求耗时比较多，所以尽量合并请求，常用的减少http请求数有以下几种：

1）合并图片。当图片较多时，可以合并为一张大图(雪碧图)，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4）充分利用缓存(强缓存，协商缓存）

         强缓存：浏览器在请求静态资源的时候，会根据静态资源的 Cache-Control ，Expires 判断是否超期，如果未超期则无需向服务器发起请求，直接使用缓存的文件。

        协商缓存：强缓存失效后，浏览器向服务端发起请求静态资源，服务端根据请求头的 ETag ，Last-Modify 判断资源是否失效，如果失效返回新的资源，未失效则告诉浏览器使用磁盘的缓存

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

（注：如果网站支持 HTTP2，上面的减少 HTTP 请求变得不是那么必要了。因为 HTTP2 建立的 TCP 链接可以支持多路复用。）

2. 图片优化

优化方法：

1）尽可能的使用PNG格式的图片，它相对来说体积较小。

2）对于不同格式的图片，在上线之前最好进行一定的优化。

3）图片的延迟加载，也叫做赖加载。

3. 使用CDN

CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

4. 开启GZIP

GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。

5. css和js的优化

1）js相关

• js 放在 body 结尾之前，也可以利用 async 和 defer 属性，实现异步加载。
• 使用节流和防抖
  ，减少触发频率。
• 避免循环操作 DOM，可以使用 documentFragment 在内存操作后再插入 DOM
• 移除无用代码，可以利用 webpack 的 tree shaking
• 按需加载，避免一次性加载无用的 js 文件

2) css相关

• 避免使用 @import，使用 link 代替
• 使用 transform 来实现动画效果
• 移除无用的 css 代码，减少 css 文件大小
• 减少回流和重绘

6. 使用无cookie域名

无cookie域名的概念:当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何使用，也就是说这些cookie没什么用，没不要随请求一同发送。