web应用程序 前段部分调优

1、 使用瀑布图初步诊断网站性能瓶颈

一般来说，打开一个网页的速度会受到以下几项的影响：

1） 服务器花了太长的时间将.aspx页面的内容转化为html。

2） .aspx页面花了太长的时间从服务器端将内容发送到客户端。

3） 页面上的图片或者flash文件花了太长的时间从服务器端发送到客户端。

4） JavaScript和CSS文件阻塞页面渲染。

我们可以使用“瀑布图”来确定一个页面的性能问题是由于哪一项造成的。FireBug、Chrome自带的“开发人员工具”都可以生成“瀑布图”。FireBug与Chrome （9.0或以上版本）通过“网络（Network）”选项卡查看“瀑布图”。下面是通过FireFox访问新浪微博”我关注的人”，FireBug生成的瀑布图。

图1 瀑布图

图中每一行表示一个Http请求，每一个请求都有一条时间线，用于表示这个请求所花费的时间。如果将鼠标放到某一条时间线上，可以看到以下信息：

图2 时间线

域名解析：搜索DNS服务器并解析域名为IP地址所花费的时间，这里是0ms。

建立连接：客户端通过IP地址与Web服务器建立连接所花费的时间,这里是562ms。

发送请求：客户端向Web服务器发送请求所花费的时间，这里是0ms。

等待响应：服务器从接收到Http请求到开始向客户端发送内容所花费的时间，这里是391ms。这段时间通常包括数据库查询、aspx页面内容转换为html等等操作。

接收数据：服务器的响应内容全部发送到客户端所花费的时间，这里是94ms。

有了这些信息，我们就能初步诊断网站的性能瓶颈。

1）首先看一下哪个请求花费的时间比较长，看看这个请求的时间线信息，确定是服务器响应慢了还是网络的问题。

2）如果每个请求所花费的时间都没有明显高于其他，那么就看一下是不是页面的Http请求总数太多了。因为浏览器对单个域名的并发连接数是有限制的，需要处理完一批请求再发送另一批请求。假设页面有100个请求，每个请求花费1s，浏览器最大并发数限制为10个，那么处理完所为请求就需要100/10*1s=10s的时间。

关于最大并发数，Http1.1的标准是2，而目前主流的浏览器IE、FireFox、Chrome为了提高速度，分别修改为10、6、6（根据具体版本可能有所变化）。

2、 各种性能瓶颈及其对策

前端性能问题

雅虎专门研究网页性能问题的工程师发现，一个页面从请求到加载完，80%的时间都花在前端上（http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/）。事实也是如此，以图一为例，整个页面完全加载完花费了12s的时间，而服务器的响应时间只有391ms，其他时间都花在获取页面静态文件（如JS、CSS、图片等文件）上了。所以优化一个网站首先应从前端性能优化下手。

对策1：使用多域名增加最大并发数

仔细分析图一中的“域”，可以发现“tp1.sinaimg.cn”、“tp3.sinaimg.cn”这样的域名。这样做可以成倍的增加并发数。因为浏览器只对单个域名限制并发数，而不对单个IP限制并发数，所以可将一个IP地址映射到多个域名，然后使用这些域名访问网站资源，这样原本浏览器的并发数为6，使用两个域名并发数就可以达到12个了。但需要注意的是，域名并不是越多就越好的，因为域名解析也需要花费时间，而且并发数太多也会耗费客户端太多的CPU，域名数量到了一定程度，网页性能就会开始下降，所以在应用中需要根据实际情况寻找一个平衡点。如果不是特别需要，一般2到4个为佳。

对策2：通过文件压缩等方式降低单个文件的大小

对于JS文件，可以通过工具对其进行压缩，去除不必要的空格、换行符等。对于图片文件，优先考虑使用CSS来代替，实在不行可以考虑对图片进行裁剪。对于页面文件，尽可能使用Html标签而不使用服务器控件以减少ViewState长度，将内联的javascript和CSS放到单独的文件中，尽可能使用长度较小的字符串来作为控件ID值。

对策3：合并JS和CSS文件减少并发数

如果将两个JS文件合并不至于对项目维护造成影响，那么最好将它们合并。

对策4：使用图片延迟加载技术减少并发数

所谓图片延迟加载，就是每次只加载当前屏幕可见区域的图片，其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术，减少了并发数，不但减少了服务器的压力，也降低了页面的加载时间，目前很多门户网站都使用了该技术，如腾讯微博的“看看推荐的人”页面，在该页面上有几千个头像，如果一次性加载全部的图片，就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单，就是将页面上的src替换成其他标记（如original），在页面滚动到相应位置后，再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载，不过该插件并没有真正的减少图片延迟加载，因为执行js是在页面的page_load之后，所以实际上打开页面后，图片已经全部下载到客户端，只是因为src属性被替换成original而没有显示起来。针对这种情况，网上有人提供了解决方案：将aspx页面上的src替换成original，这样保证page_load时绝对不会请求图片文件，然后Jquery.LazyLoad.js文件第62行的代码$(self).attr("original", $(self).attr("src"));修改为$(self).attr("original", $(self).attr("original"));