web前端性能优化

分析步骤：先罗列一个站点打开到渲染完成的步骤，然后分析每个步骤中可优化点，写出优化方法

用户用浏览器访问一个网站的时候具体的过程与步骤 
 
1.用户在浏览器中输入网址，计算机提取出域名

2.浏览器通过DNS查找域名对应的IP地址，获得IP地址后

浏览器会依次进行如下查找: 浏览器缓存 -》系统缓存 -》路由器缓存 -》ISP DNS缓存 -》 递归搜索

3.尝试与对应的服务器建立TCP连接，连接成功之后

这个过程涉及到tcp的三次握手协议，它的过程如下：（该协议提供一种可靠的面向连接的网络服务） 
第一次握手：建立连接时，客户端发送syn包(seq=j)到服务器，并进入SYN_SEND状态，等待服务器确认； 
第二次握手：服务器收到syn包，必须确认客户的SYN，同时自己也发送一个SYN包（ack=j+1,seq=k），此时服务器进入SYN_RECV状态； 
第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。 
 
【补充】tcp四次挥手过程 
（1）TCP客户端发送一个FIN，用来关闭客户到服务器的数据传送（报文段4）。 　 
（2） 服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1（报文段5）。和SYN一样，一个FIN将占用一个序号。 　 
（3） 服务器关闭客户端的连接，发送一个FIN给客户端（报文段6）。 
（4） 客户段发回ACK报文确认，并将确认序号设置为收到序号加1（报文段7）。 浏览器访问一个页面所经历的全部过程 

4.将用户的请求装入http数据包，通过建立的tcp连接发送给服务器，等待数据返回。

当一个用户发起一个静态资源请求的时候,浏览器会通过以下几步来获取资源 
1.本地缓存阶段:先在本地查找该资源,如果有发现该资源,而且该资源还没有过期,就使用这一个资源,完全不会发送http请求到服务器 
2.协商缓存阶段:如果在本地缓存找到对应的资源,但是不知道该资源是否过期或者已经过期, 则发一个http请求到服务器,然后服务器判断这个请求,如果请求的资源在服务器上没有改动过,则返回304, 让浏览器使用本地找到的那个资源 
3.缓存失败阶段:当服务器发现请求的资源已经修改过,或者这是一个新的请求(在本来没有找到资源),服务器则返回该资源的数据,并且返回200, 当然这个是指找到资源的情况下,如果服务器上没有这个资源,则返回404

5.如果数据成功返回，比如说，返回的是一个html页面，则渲染这个页面，渲染的过程中会遇到一些数据标记，比如额外的 CSS、JS代码，图片、音视频，附件等，这时候就查找本地缓存，如果缓存里有且没过期，就使用本地缓存的数据，否则就向服务器发送请求

6、浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；

用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；

交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

---

web前端可优化点： 
CDN，缓存，css/js/图片压缩合并，减少请求次数，预加载，预请求, 反向代理

---

优化方法：

1、减少http请求

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

2、缓存

http缓存 ：通过http header中的expries设置一个很长的过期头；变化不频繁而又可能变化的资源使用 
Last-Modifed来做请求验证。尽可能让资源能够在缓存中待得更久 
浏览器缓存：对一个网站而言，css,js,img这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能，通过设置http头的cache-control和expries属性，可设定浏览器缓存，缓存时间可以是数天，甚至几个月 
静态资源变化需要即是应用到客户端浏览器，可通过改变文件名实现，即更新js文件名。

3、懒加载

在页面加载的时候只加载第一屏，当用户继续往后滚的时候加载后续图片，这样可以在页面刚加载时减少http请求数

4、css放最上面，js放最下面

5、减少cookie传输

cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输

6、js代码优化 
a、减少作用域链查找 尽量使用局部变量，减少闭包的使用 b、数据访问 JavaScript中的数据访问包括直接量 (字符串、正则表达式 
)、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量： 
　　a. 对任何对象属性的访问超过 1次 　　b. 对任何数组成员的访问次数超过 1次 
　　另外，还应当尽可能的减少对对象以及数组深度查找。

7、cdn加速

CDN（contentdistribute 
network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据，即所谓网络访问第一跳，如下图。 

由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。 
CDN缓存的一般是静态资源，如图片、文件、CSS、script脚本、静态网页等，但是这些文件访问频度很高，将其缓存在CDN可极大改善网页的打开速度。

8、反向代理

传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。如下图所示：

 
论坛网站，把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度，当这些动态内容有变化时，通过内部通知机制通知反向代理缓存失效，反向代理会重新加载最新的动态内容再次缓存起来。

此外，反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。