前端性能优化的认识

减少 http 请求次数，合理设置Http缓存

减少 DNS 查询次数（域名解析器）

缓存 Ajax

延迟加载

减少cookie传输

避免使用 eval和 Function

减少作用域链查找

字符串拼接

采用cdn加速

使用轻量级框架

浏览器端的优化:

web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等

减少 http请求次数，合理设置Http缓存

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

CSS Sprites、CSS放在页面最上部，javascript放在页面最下面

减少http的主要手段是合并CSS、合并javascript、合并图片，主要是采用gulp合并压缩文件。采用webpack进行合并，减少http请求次数

如果80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash等)上。就会对用户不友好。所以减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

减少 DNS 查询次数（域名解析器）

DNS 查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部

图片或脚本)，那么客户端首次解析这些 domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器

中一段时间，所以 DNS 查询一般是对首次访问响应速度有所影响。

缓存 Ajax

Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，

例如 ajax 的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高 ajax的响应速度。

尽量避免大量字符串的拼接，减少ajax的请求次数，

一、什么是Ajax缓存原理

Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。

关于Ajax的更多内容请参考《Ajax简介》

二、Ajax缓存的好处

这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源。

三、Ajax缓存的不足

Ajax缓存虽然有上述的好处，但是如果通过Ajax对一些后台数据进行更改的时候，虽然数据在后台已经发生改变，但是页面缓存中并没有改变，对于相同的URL，Ajax提交过去以后，浏览器还只是简单的从缓存中拿数据，这种情况当然就不行了。

四、解决Ajax缓存问题的方法

解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方法：

1.在ajax发送请求前加上xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2.在服务端加 header(“Cache-Control:no-cache, must-revalidate”);

3.在ajax发送请求前加上xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

4、url加上随机数变量这样每次请求的路径就会不一样。这样就不会有缓存。

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟

加载的集合中。Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有 Javascript的时

候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

减少cookie传输

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

 

javascript代码优化：

避免使用eval和 Function

每次 eval 或Function构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作—— 通常比简单的函数调用慢 100倍以上。 

减少作用域链查找

前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。 

1.   <span style="font-size:14px;">// 全局变量   

2.   var globalVar = 1;   

3.   function myCallback(info){   

4.       //局部变量缓存全局变量   

5.       var localVar = globalVar;   

6.       for( var i = 100000; i--;){   

7.       //访问局部变量是最快的   

8.       localVar += i;   

9.       }   

10.      //本例中只需要访问 2次全局变量  

11.      在函数中只需要将 globalVar中内容的值赋给localVar 中  

12.      globalVar = localVar;   

13.  }  

减少字符串拼接

               Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

其他优化：

采用cdn加速：CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据

使用轻量级框架