Web前端性能优化

浏览器访问优化

　　1.1 减少http请求

           大家都知道，http协议是一个无状态的应用层协议，那么就意味着客户端每向服务器端发送一次http请求，服务器和客户端都需要建立一条通信链路，从而进行数据传输。而在服务器端，每接收到一个http请求，都需要启动一个独立的线程去处理。这些通信和服务的开销都很昂贵，所以在我们网站的设计过程中，应该尽量的减少http请求以提高性能。

　　　　在web开发过程中，减少http请求的方式有很多种，其主要的手段有合并CSS，合并JS，合并图片。因为我们在浏览器中打开一个页面，页面中所需要用到的每一个css，js文件和每一张图片，客户端都需要发送一次http请求到服务器端获取这些文件，所以在页面的设计时将浏览器一次访问需要的js，css合并成一个文件，将页面中应用频率很高的图片合并成一张图片，通过减少http请求来提高网站性能。

      1.2 使用浏览器缓存

　　　　对于一个网站而言，CSS，Javascript，Logo，图标等这些静态资源文件更新的频率都比较低，但是这些资源在每次的http请求中基本上都是需要的，如果将这些文件缓存在浏览器中，这样就可以减少http请求，从而提高性能。通过设置http头中的Cache-Control和Expires的属性，可设置浏览器缓存，缓存时间可以是数天，甚至是几个月。

　　　　在某些时候，静态资源文件变换需要更新到客户端的浏览器缓存中，这种情况下可以通过改变文件的文件名来实现，即使用浏览器缓存的网站如果需要更新CSS，JS，Logo等信息，可以通过改变文件名的方式进行更新。

　　　　使用浏览器缓存策略的网站在更新静态资源时，特别要注意的一点就是在更新时不宜同时全部更新，而是应该一个文件一个文件的逐步更新，并有一定的时间间隔，这样的话可以避免用户浏览器突然之间大量缓存失效，集中更新缓存，对服务器的压力也比较大。可能会造成服务器负载骤增，网络堵塞。

 1.3 启用压缩

　　　　在服务器端进行文件压缩，在浏览器端进行文件的解压缩，可以有效的减少客户端与服务器端童通信传输的数据量。对文本文件的压缩率可以到达80%，所以对HTML，CSS，JS等文件进行GZip压缩，可以有效的提高网站的访问速度。但是启用压缩，会对服务器端造成一定的压力，所以在客户端网络条件良好但是服务器端资源比较匮乏的情况下少用。

      1.4 Css和JS的在页面中的位置

　　　　在我们做网站开发的过程中，一种比较习惯性的操作都是将所有的CSS文件，JS文件都放在页面的最上面，其实这对于成熟的WEB开发者来说，这中做法是不对的。我们应该采用CSS在最上面，JS在最下面的策略。

　　　　在我们的浏览器每加载一个页面时，他会先下载完所有的CSS文件之后才开始整个页面的渲染，所以把CSS文件放在页面的最上面，目的就是让CSS文件最先下载。但是js文件则相反，浏览器在下载js文件时，是下载完了之后立即执行，有可能在执行的过程中会造成整个页面的阻塞，造成页面显示缓慢，因此JS文件最好放在页面的最底部。但是如果JS程序在页面解析的时候就需要使用，那么就需要权衡考虑所放的位置了。

      1.5 减少cookie的传输

　　　　一方面Cookie包含在每次http请求和响应中，太大的Cookie严重影响数据传输，所以那些数据需要写入cookie，这是需要慎重考虑的，最佳方案就是尽量的减少Cookie中传输数据的大小。另一方面，对于一些静态文件来说，没有必要写入Cookie，可以考虑静态资源独立域名访问的策略，避免请求静态资源时发送cookie，减少cookie的传输次数。

　　1.6 使用CDN加速：

　　　　CDN（Content Delivery Network）即内容分发网络，其基本思路是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快、更稳定。通过在网络各处放置节点服务器所构成的现有互联网基础之上的一层虚拟网络，CDN系统能够实时的根据网络流量和各节点的连接，负载状况以及用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的就是使用户能够就近的获取请求数据，解决网络访问拥挤状况，提高用户访问系统的响应时间。

CDN能够缓存一般的CSS，js图片等静态资源文件，而且这些文件的访问频率很高，将其缓存在CDN可以极大的提高网站的访问速度。

　　但是由于CDN是部署在网络运营商的机房，所以在一般的网站中都很少用CDN加速。

 1.7 反向代理

　　　　和传统的代理服务器一样，反向代理服务器也有保护网站安全的作用，来自互联网的请求必须经过反向代理服务器，相当于在原始服务器之间增加一道屏障。

　　　　　　除了安全功能，反向代理服务器也可以通过配置缓存功能加速web请求，当用户第一次访问呢静态内容的时候，静态内容就被缓存在反向代理服务器上，下一次用户请求静态资源时，直接从反向代理服务器返回静态内容，加速web请求访问速度，减轻原始服务器的压力。

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