前端性能优化一网打尽

1、负载均衡
（1）DNS服务器实现负载均衡。缺点：无法判断哪一个server是down机的，无法判断每个server的负载
（2）硬件设备：负载均衡器（Load Balancer），作为独立的硬件置于客户端与服务器之间。价格昂贵
（3）反向代理：Nginx服务器，反向代理是实现负载均衡的主流手段之一，当我们访问拥有反向代理的网站时，实际访问的是其反向代理服务器，而非真正的服务器，当请求到达反向代理服务器时，反向代理服务器再将请求转发至服务器。

2、CDN网络
内容分发网络（Content Delivery Network），简称：CDN，通常情况下，我们所要的数据都是从主服务器中获取，但假如我们的主服务器在南方，而访问用户在北方，那么访问速度就会相对变慢，变慢的原因有很多，例如传输距离，运营商，带宽等等因素，而使用CDN技术的话，我们会将CDN节点分布在各地，当用户发送请求到达服务器时，服务器会根据用户的区域信息，为用户分配最近的CDN服务器。
CDN简单的来说就是存储一些静态文件的一台或多台服务器，通过复制，缓存等方式，将文件保存其中。
　　（1）.静态文件
　　 css，html，图片，媒体都属于静态文件，也就是说用户发送的请求不会影响静态文件的内容，而jsp，php等文件就不属于静态文件，因为他们的内容会因我们的请求而发生改变。
　　 （ 2）.CDN数据从哪里来
　　复制，缓存，CDN服务器可以在用户请求后缓存文件，也可以主动抓取主服务器内容。

3、减少HTTP请求
（1）脚本合并：通常一个大型网站需要依赖多个JS文件。可以把多个文件合并成一个，这样只需要引用一个
（2）CSS雪碧图 。缺点：
① 最大的问题是内存的使用：除非非常小心的组织，否则会留下大量无用的空白。
② 影响页面缩放功能：缩放时要避免雪碧中相邻图片露出来。

4、文件压缩
包括CSS、JavaScript、图片的压缩。
JavaScript：
最小化：删除注释和空格等不必要的字符。安全、直白，文件减少21%。
混淆：删除注释和空格，将函数名和变量名替换成短的字符串，难于反向工程。复杂，容易产生问题，文件减少25%。

5、延迟加载图片（Lazy Load Images）
懒加载的原理：我们先将img标签中的src链接设置为一样的图片（空白图片），将真正的图片链接放在自定义属性中，如（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。

6、避免使用eval 和Function 、with
每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
　　eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
　　Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

7、 减少作用域链查找
也就是减少跨作用域查找，例如：闭包

8、减少cookie传输
一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

9、合理设置浏览器缓存、CDN缓存、 HTTP缓存(https://www.jianshu.com/p/47f3406c8084)
浏览器缓存：网页静态文件在初次加载是会保存在本地，作为缓存
没有CDN：浏览器缓存
使用了CDN：浏览器缓存+CDN缓存（属于服务器缓存）
强制缓存：如果命中强制缓存，返回200，利用Expires或者Cache-Control这两个http header实现的，都用来表示资源在客户端缓存的有效期，但是Expires是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改下客户端时间，就能影响缓存命中的结果。所以在http1.1的时候，提出了一个新的header，也就是Cache-Control，这是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，因此更有效安全一些。
对比缓存：如果命中对比缓存，请求响应返回的http状态为304以及一个Not Modified字符串，对比缓存利用的是【Last-Modified、If-Modified-Since】、【ETag、If-None-Match】这两对header来管理的。
Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：
1.Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度
2.如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
3.有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

10、CSS放在页面最上部，javascript放在页面最下面
减少css表达式的应用

11、异步请求 Callback
大运算量或者费时操作给浏览器线程去处理，这样可以保证js主线程不被阻塞。

12、避免重定向
301：永久重定向，抓取新内容的同时也将旧的网址替换为重定向之后的网址；
302：暂时重定向，抓取新的内容而保留旧的网址
302好于301
重定向会增加http请求数，但必要的重定向有利于提高用户体验
定义链接URL时使用最完整的、最直接的地址。如：
使用www.baidu.com而非baidu.com
使用www.google.com.hk而非www.google.com
使用http://write.blog.csdn.net/而非http://write.blog.csdn.net

13、减少DOM操作和重排和重绘
减少对DOM元素的查询与修改
重排【reflow】
重绘【repaint】
重排会导致重绘

14、使用GET请求
为什么get比post更快
(1).post请求包含更多的请求头
因为post需要在请求的body部分包含数据，所以会多了几个数据描述部分的首部字段（如：content-type）,这其实是微乎其微的。
（2).最重要的一条，post在真正接收数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
（3）.get会将数据缓存起来，而post不会
（4）.post不能进行管道化传输

移动端性能优化
1.尽量使用css3动画，开启硬件加速。
2.适当使用 touch 事件代替 click 事件。
3.避免使用 css3 渐变阴影效果。
4.可以用 transform: translateZ(0) 来开启硬件加速。
5.不滥用Float。Float在渲染时计算量比较大，尽量减少使用
6.不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
7.合理使用requestAnimationFrame动画代替setTimeout
8.CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
9.PC端的在移动端同样适用