web前端性能优化

前端性能优化其实就是让使用户等待的时间减少，那么显而易见的就是提高网速，但这不是我们程序员可以搞的东西，就说下我们能做的吧。
要说前端性能有话，你必须先了解：从用户输入URL到页面渲染都经历了什么。
传送门：https://segmentfault.com/a/1190000006879700

上面文章内容很多，如果你了解上面知识，或者不想花时间了解上面，那么直接看下面吧。

从URL到页面大致一下几个过程：
1、DNS解析
2、TCP连接
3、发送HTTP请求
4、服务器处理请求并返回HTTP报文
5、浏览器解析渲染页面
6、连接结束

从上面的过程中我将前端性能优化分为两大部分：
一、网络相关的一切，包括DNS解析 HTTP请求等等
二、web优化，就是前端页面相关部分，也就是我们日常撸代码能够做到的一些

网络相关的一些优化

DNS优化
1、设置DNS多级缓存：浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
2、DNS负载均衡(DNS重定向)：使用CDN(Content Delivery Network)内容分发网络，返回一个离用户最近的IP地址。

HTTP
减少HTTP请求：页面内的图片，或者引入的CSS文件和JS文件等都是一个请求，都等重复上面的过程，减少请求的次数自然就提高了访问页面的速度。
方法：
1、合并CSS文件：一个CSS文件请求一次，多个就请求多次，当然合并了就请求一次
2、合并JS文件
3、雪碧图：将一些小图片制作成雪碧图，只会请求一次
4、缓存：将一些CSS文件或者JS文件缓存下来自然速度就快上去了
5、减少cookie中不必要的信息：因为每个请求都会把cookie带上，内容少自然就快；其实也可以使用H5的web存储，用来代替cookie

web优化
一、CSS
1、尽量不要在行内写CSS
2、使用link代替@import
3、压缩CSS
4、避免使用CSS表达式
5、CSS写在HTML文件上部

二、JavaScript
1、JS以外部文件形式引入
2、避免重复的JS代码
3、减少JS对DOM的操作
4、避免无谓的循环
5、JS代码（引入连接）放在页面下部
6、压缩JS代码

三、HTML
如果可能减少页面中的DOM元素

四、图片
图片使用适当的格式，比如小图片用GIF PNG8等这样会减少图片的大小。

上面基本就是优化的一些方法，不全的话我会随时补充上去。
如果对为什么这样做有兴趣的小伙伴可以看我最开始介绍的文章：从URL到页面和下面介绍的reflow和repaint 这两篇 会让你理解为什么这么做。

浏览器渲染页面有两个重要的过程reflow和repaint，这两个过程对性能的开销很大，提高性能应减少这两个过程，他们也是为什么要：减少JS操作DOM，减少DOM节点等的原因，如果有兴趣可以看一下：https://segmentfault.com/a/1190000005182937
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

关于上面提到的文件合并、压缩、制作雪碧图等前端的一些工具都可以帮助我们实现