大型网站前端架构的设计与优化

前端请求过程是指用户和应用服务器之间发生数据交互前的展现过程，这个过程通常不包含业务逻辑，不需要处理动态内容。

所谓唯快不破，互联网产品在用户体验方面，很重要的一点就是快。前端技术基本的架构与优化，主要是怎样让页面更快更好的展示在用户面前。

一、页面开发最佳实践

1.css样式置顶，Javascript脚本置底

样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样可以使浏览器逐步加载已下载的网页内容。
样式表中的内容是绘制网页的关键信息，如果将样式表放在底部，大多数浏览器在实现时都努力避免重绘，浏览器会拒绝渲染已经下载的网页，用户看到的可能就是不正常的页面。

同样，把JS脚本置底，最后再加载脚本文件，这样可以让网页渲染所需要的内容尽快加载显示给用户。

2.合并和减少HTTP请求次数

减少请求次数是缩短响应时间的关键，可以通过简化页面设计来减少请求次数。

3.缓存Ajax

最快的Ajax请求就是没有请求。
Ajax可以帮助我们异步的下载网页内容，但是有些网页内容虽然是异步的，用户还是需要等待它的返回结果，例如用户联系人的下拉列表，下拉过程中还是会有等待。

我们要注意尽量应用以下规则提高ajax的响应速度：

添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少dns查询
精简javascript
避免跳转
配置Etags

　　

4.延迟加载

最小内容集是网页最初加载需要的文件和资源，在设计时考虑到这一点，然后把剩下的内容就可以推迟到延迟加载的集合中。
Javascript是典型的可以延迟加载内容，所以一般会把JS文件放在页面底部。

一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能：
使用reauire.js或sea.js按需加载js模块；
使用lazyload.js插件延迟加载图片；

5.避免请求空的图片src

空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。
浏览器如此实现也是根据RFC 3986 – Uniform Resource Identifiers标准，空的src被定义为当前页面。

6.合理的设置Cookie

Cookie信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度：

去除没有必要的cookie，如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
设置合适的过期时间，比较长的过期时间可以提高响应速度

　　

7.使用Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。

8.减少iframe数量

使用iframe要注意理解iframe的优缺点
优点：
可以用来加载速度较慢的内容，例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载

缺点：
即使iframe内容为空也消耗加载时间
会阻止页面加载
没有语义

二、使用CDN加速静态资源访问

提高下载速度还可以通过CDN(内容分发网络)来提升。
CDN指内容分发网络，通过部署在不同地区的服务器来提高客户的下载速度。
如果你的网站上有大量的静态内容，CDN是必不可少的。
大型互联网网站都有自己的CDN，网上目前也有很多公开免费的CDN资源可以使用，国内的如：

百度：http://cdn.code.baidu.com
新浪：http://lib.sinaapp.com
又拍：http://jscdn.upai.com
七牛：http://www.staticfile.org
360：http://libs.useso.com

三、为HTTP添加Expires或Cache-Control报文头

对于静态内容添加Expires，将静态内容设为永不过期，或者很长时间以后。在IIS中设置Expires可以看Configure the HTTP Expires Response Header (IIS 7)。
对于动态内容应用合适的Cache-Control，让浏览器根据条件来发送请求。

四、动静分离，图片资源和静态资源等独立部署

静态资源，如Javascript、CSS等文件应该部署在专门的服务器上，和请求动态内容的服务器分离，并且使用不同的域名，如专门的二级域名。

除了这些静态资源，网站的图片资源，比如产品图片，图集等内容应该使用单独部署的服务器存储，同样配置不同的域名访问。

五、反向代理技术

部署在网站机房，在应用服务器、静态资源服务器、图片服务器之前，提供页面缓存服务。

反向代理是代理服务器的一种。它根据客户端的请求，从后端的服务器上获取资源，然后再将这些资源返回给客户端。
正向代理作为一个媒介将互联网上获取的资源返回给相关联的客户端，而反向代理是在服务器端作为代理使用，而不是客户端。
反向代理正好与正向代理相反，对于客户端而言反向代理服务器就像是原始服务器，并且客户端不需要进行任何特别的设置。