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 数据库优化方法
参见本博客相关内容。