大型网站架构之WEB前端优化

回顾下之前博客中提到的大型网站架构：
[img]http://dl2.iteye.com/upload/attachment/0117/6333/165c00f1-8461-389c-bb0c-0c80b3763eb6.png[/img]

这张图中，有很多经典的模块。比如CDN服务器，反向代理服务器，负载均衡系统，应用服务器，分布式缓存系统等等。之后的几篇博客中我会逐个来介绍。今天先来看看WEB前端优化，在上图中，负载均衡服务器之前的部分都可以看成WEB前端，其中自然少不了浏览器。

[color=red]WEB前端优化包括浏览器优化，使用CDN缓存加速，使用反向代理缓存加速。
在浏览器优化时[/color]，可以采用[color=red]减少http请求，使用浏览器缓存，启用压缩，减少Cookie传送，优化CSS和JS代码位置等[/color]
[color=red]减少http请求：[/color]
http协议是应用层协议，意味着每次http请求都需要建立通讯链路，进行数据传输。因此减少http请求可提高性能。
正常情况下，当浏览器访问一个网页时，服务器会先返回对应的html网页，如果html中有其他的css，js等脚本，会多次进行http请求来下载这些脚本，这样的话无形中增加了服务器的压力。所以我们要尽可能的在html中关联最少的脚本，甚至将css等写到html中，以减少http请求次数。

[color=red]使用浏览器缓存：[/color]
通过设置http响应头中的Cache-Control和Expires属性，可以设定浏览器缓存页面。在某些情况下，尽管有缓存，我们还是希望将静态文件的变化及时的应用到客户浏览器，此时可以通过更改文件名来实现。因为如果只改文件内容不改名字的话，浏览器的缓存机制是不会加载新的同名文件的。

[color=red]启用压缩：[/color]
对于文本文件，比如html，css,javascript，启用GZip压缩可以达到很好的效果。

[color=red]减少cookie传输：[/color]
cookie包含在每次的请求和响应中，太大的cookie会严重的影响数据传输。因此尽量少向cookie中写数据。另外，对于某些静态资源的访问，不需要进行cookie验证，就没有必要发送cookie。

[color=red]优化CSS和JS代码位置:[/color]
将CSS放在页面最上面，将js放到最下面。

[color=red]CDN[/color]的全称是内容分发网络，他的本质仍然是缓存（缓存一些常用的静态资源），CDN服务器是部署在网络提供商的机房中，在距离用户最近的地方提供缓存，加快用户访问速度，减少数据中心的压力。

[color=red]反向代理[/color]位于整个网站的最前端，代理整个网站系统接收Http请求。反向代理服务器除了可以保护网站系统外，其中也缓存一些资源，如果请求的内容正好是其中的资源，就直接返回给用户，可以避免一些去往应用服务器的请求。