WEB应用性能优化策略

1 性能优化步骤

[1].    性能瓶颈定位

按照浏览器-（chrome开发者工具、Fiddler）>web应用（结构和代码逻辑分析）->数据库（sql语句分析）的方向进行定位，可使用压力测试工具辅助定位）

[2].    选择性能优化方法（方案与成本同时考虑）

[3].    进行优化

2 前端优化方法

记住：“一个页面从请求到加载完，80%的时间都花在前端上”

1)       使用多域名增大并发数

浏览器只对单个域名限制并发数，而不对单个IP限制并发数，所以可将一个IP地址映射到多个域名，然后使用这些域名访问网站资源。

但需要注意的是，域名并不是越多就越好的，因为域名解析也需要花费时间，而且并发数太多也会耗费客户端太多的CPU，域名数量到了一定程度，网页性能就会开始下降，所以在应用中需要根据实际情况寻找一个平衡点。如果不是特别需要，一般2到4个为佳。HTTP1.1支持2

2)       减少HTTP请求

1)    合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。

2)    CSS Sprites 利用 CSSbackground 相关元素进行背景图绝对定位,把多个图片合成一个图片。

3)       使用浏览器缓存

服务器端强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。特别是对于JS、CSS、图片等变动较少的文件。

4)       减少文件数量及大小

IE和Firefox浏览器都支持客户端GZIP，传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。

于JS文件，可以通过工具对其进行压缩，去除不必要的空格、换行符等；

对于图片文件，优先考虑使用CSS来代替，实在不行可以考虑对图片进行裁剪；

对于页面文件，尽可能使用Html标签而不使用服务器控件以减少ViewState长度，将内联的javascript和CSS放到单独的文件中，尽可能使用长度较小的字符串来作为控件ID值；

合并js和css文件。

5)       图片、JS的预载入

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

可以在登录页面预载入JS和图片

6)       使用图片延迟加载技术

所谓图片延迟加载，就是每次只加载当前屏幕可见区域的图片，其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术，减少了并发数，不但减少了服务器的压力，也降低了页面的加载时间，目前很多门户网站都使用了该技术，如腾讯微博的“看看推荐的人”页面，在该页面上有几千个头像，如果一次性加载全部的图片，就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单，就是将页面上的src替换成其他标记（如original），在页面滚动到相应位置后，再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载，使用方法如下所示：

 

1 jQuery(document).ready(
2 function($){
3 $("img").lazyload({
4      placeholder : grey.gif //代替原图片
5      effect      : "fadeIn"
6 });
7 });

 

 

不过该插件并没有真正的减少图片延迟加载，因为执行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"));

3 后端优化方法

影响服务器端的性能是多方面的，包括软件架构、代码逻辑、服务器硬件配置等等各方面。

4 数据库优化方法

参见本博客相关内容。