web前端性能优化

前言：最近看了很对关于前端性能优化方面的知识，但都比较杂，决定自己整合一下。我主要针对前端性能优化分了几个方面来说，在牵扯深度技术概念性问题不会做过多阐述。

1.网络方面优化

1.减少HTTP请求。这个请求是多方面的，有可能是你在js代码中的请求，也有可能是img标签的请求或是css中你插入的图片请求。因为一次HTTP请求伴随着一系列事件的发生（DNS寻址、服务器建立连接、发送数据，等待服务器响应，接收数据等等）。
2.避免404。我们知道使用HTTP请求来获得一个没有用处的响应，这对用户体验是极其差的一件事。
3.避免重定向。

2.代码方面优化

代码方面就会涉及很多技术性的细节问题。以下是我目前知道的一些。（不定时更新）
1.尽量减少DOM元素数量。页面中存在大量DOM数量的话，自然会影响渲染时间等问题。
2.CSS代码放在html页面顶部，JS代码则放在页面底部。当然，如果有大量的CSS和JS代码，自然用外链的方式时最好的，作为外部文件引用，是可以提高页面速度的，因为这两个文件都能在浏览器中产生缓存。
3.说到缓存问题，我就会想到最近使用过Vue的keepalive（它的主要作用：项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。）
4.减少DOM的访问。当然这也是vue、react等框架比jquery好的很大一个优点了。
5.js代码部分注意with关键字的使用，避免使用eval()函数。
6.css代码避免使用@import。因为这种方式加载css相当于把css放在了底部。
7.Lazyload懒加载。

3.图片、cookie等方面优化

1.CSS精灵图。
2.优化图片大小。
3.favicon.ico尽量优化，因为这个也是保存在内存中的。
4.减小cookie大小。cookie的大小只有4KB，且一般情况下保存在内存中。

4.服务器方面优化

1.使用代理服务器。
2.使用GZIP压缩。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。