web前端性能优化

web前端性能优化

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

一.浏览器访问优化

1.减少http请求

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

　　减少HTTP的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的js、css合并成一个文件，这样浏览器访问就只需要一次请求。图片也可以合并、多长图片合并成一张，如果每张图片都有不同的超链接，可通过css便宜响应鼠标点击操作，构造不同的url

2 使用浏览器缓存

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

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

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

3 启用压缩

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

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

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

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

5 减少cookie的传输

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

二.CDN加速

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

　　由于CDN部署在网络运营的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。

　　CDN能够缓存的一般是静态资源，如图片、文件、CSS、js脚本、静态网页等，但是这些文件访问频度很高，将其缓存在CDN可极大改善网页的打开速度。

三.反向代理

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

和传统代理服务器可以保护浏览器安全一样，反向代理服务器也具有保护网站安全的作用，来自互联网的访问请求必须经过代理服务器，相当于web服务器和可能的网络攻击之间建立了一个屏障。

　　除了安全功能，代理服务器也可以通过配置缓存功能加速web请求。当用户第一次访问静态内容的时候，静态内容就被缓存在反向代理服务器上，这样当其他用户访问该静态内容的时候，就可以直接从反向代理服务器返回，加速web请求响应速度，减轻web服务器负载压力。事实上，有些网站会把动态内容也缓存在代理服务器上，比如维基百科及某些博客论坛网站，把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度，当这些动态内容有变化时，通过内部通知机制通知反向代理缓存失效，反向代理会重新加载最新的动态内容再次缓存自来。

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