前后端如何优化网站性能
上一篇 / 下一篇 2011-11-19 22:06:18 / 个人分类:测试经验
查看( 1427 ) /
评论( 0 )
一、前端优化
ghAB!m7G0
iSV8d`[^'?F9z0
"Jgo%MmM0 网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端程序等各个方面,我只是从实际经历出发,分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个web2.0,是因为本文更偏重于中小网站的性能优化,我所使用的系统也是典型web2.0的LAMP架构。51Testing软件测试网sk@!s!TvZq+a1MRD
51Testing软件测试网QR scC%c.E
$c8C'sC `R} Y0 首先讲讲前端的优化,用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片、CSS、Javascript、 flash…)的下载之上。因此在很多情况下,相对于把大量的时间花在艰苦而繁杂的程序改进上,前端的优化往往能起到事半功倍的作用。雅虎最近将内部使用的性能测试工具yslow向第三方公开,并发布了著名的网站性能优化的十三条规则,建议你下载并安装yslow,并作为测评网站优化效果的工具。下面我挑其中特别有价值的具体说明一下优化的方法:51Testing软件测试网8I7\%^M3UIP~
2D5t*D7k Ae|A0
p b ]5^"\ `W0 对于第一次访问您网站,尚未在浏览器cache中缓存您网站内容的用户,我们可以做的事情包括:51Testing软件测试网:x Nn)f#Vb r9| t
51Testing软件测试网x B M]/WA[pT
K-Gm,A7O5h^1r Y0 1)减少一个页面访问所产生的http连接次数
3[3eltyh.i0 对于第一次访问你网站的用户,页面所产生的http连接次数是影响性能的一个关键瓶颈。51Testing软件测试网i YX k,A Q1U
51Testing软件测试网 YAO8V UU
k.^g!zwN*e0 对策:51Testing软件测试网[0JDOx]s ck
- 尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。51Testing软件测试网"vAZ[)[
- 使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术;使用Inline images将css图片捆绑到网页中。51Testing软件测试网e7HJ+t2W3ls
- 尽量合并js和css文件,减少独立文件个数。
,UCa i*B8G-~0
(PjB V e8V0 51Testing软件测试网?mM7Qe@Z0}'ciM
2) 使用gzip压缩网页内容
0WJ ko?/}o?bs{0 使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60%)。主流的web服务器都支持或提供gzip压缩,如果使用apache服务器,只需要在配置文件中开启 mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩。51Testing软件测试网uOhP&`XUJ:^
l,Oq:U9r9v7K"{)q i0 51Testing软件测试网lB[:{}*Vs
3)将CSS放在页面顶端,JS文件放在页面底端51Testing软件测试网'?&Ppe){)y`
CSS的引用要放在html的头部header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来。不过要注意,一些大量使用js的页面,可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。51Testing软件测试网/oi8p-e.TXB
p-s-E6L|c%M;X0
}m8J3[S8I.H F(Yl0 4)使JS文件内容最小化
X^$H"G0r%X%U0 具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等。在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。
f&`,T n+m:^o6~0
$mG7}&vOO0o$[0
!G4J5x4cO{)`I*q0 5)尽量减少外部脚本的使用,减少DNS查询时间51Testing软件测试网%hj9s&Y}2mOYeq
不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容(css,js)放在其他的子域名下(如 static.xxx.com)会有利于提高浏览器并行下载网页内容的能力。
j[$RL_U0
ghAB!m7G0
iSV8d`[^'?F9z0
"Jgo%MmM0 网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端程序等各个方面,我只是从实际经历出发,分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个web2.0,是因为本文更偏重于中小网站的性能优化,我所使用的系统也是典型web2.0的LAMP架构。51Testing软件测试网sk@!s!TvZq+a1MRD
51Testing软件测试网QR scC%c.E
$c8C'sC `R} Y0 首先讲讲前端的优化,用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片、CSS、Javascript、 flash…)的下载之上。因此在很多情况下,相对于把大量的时间花在艰苦而繁杂的程序改进上,前端的优化往往能起到事半功倍的作用。雅虎最近将内部使用的性能测试工具yslow向第三方公开,并发布了著名的网站性能优化的十三条规则,建议你下载并安装yslow,并作为测评网站优化效果的工具。下面我挑其中特别有价值的具体说明一下优化的方法:51Testing软件测试网8I7\%^M3UIP~
2D5t*D7k Ae|A0
p b ]5^"\ `W0 对于第一次访问您网站,尚未在浏览器cache中缓存您网站内容的用户,我们可以做的事情包括:51Testing软件测试网:x Nn)f#Vb r9| t
51Testing软件测试网x B M]/WA[pT
K-Gm,A7O5h^1r Y0 1)减少一个页面访问所产生的http连接次数
3[3eltyh.i0 对于第一次访问你网站的用户,页面所产生的http连接次数是影响性能的一个关键瓶颈。51Testing软件测试网i YX k,A Q1U
51Testing软件测试网 YAO8V UU
k.^g!zwN*e0 对策:51Testing软件测试网[0JDOx]s ck
- 尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。51Testing软件测试网"vAZ[)[
- 使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术;使用Inline images将css图片捆绑到网页中。51Testing软件测试网e7HJ+t2W3ls
- 尽量合并js和css文件,减少独立文件个数。
,UCa i*B8G-~0
(PjB V e8V0 51Testing软件测试网?mM7Qe@Z0}'ciM
2) 使用gzip压缩网页内容
0WJ ko?/}o?bs{0 使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60%)。主流的web服务器都支持或提供gzip压缩,如果使用apache服务器,只需要在配置文件中开启 mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩。51Testing软件测试网uOhP&`XUJ:^
l,Oq:U9r9v7K"{)q i0 51Testing软件测试网lB[:{}*Vs
3)将CSS放在页面顶端,JS文件放在页面底端51Testing软件测试网'?&Ppe){)y`
CSS的引用要放在html的头部header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来。不过要注意,一些大量使用js的页面,可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。51Testing软件测试网/oi8p-e.TXB
p-s-E6L|c%M;X0
}m8J3[S8I.H F(Yl0 4)使JS文件内容最小化
X^$H"G0r%X%U0 具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等。在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。
f&`,T n+m:^o6~0
$mG7}&vOO0o$[0
!G4J5x4cO{)`I*q0 5)尽量减少外部脚本的使用,减少DNS查询时间51Testing软件测试网%hj9s&Y}2mOYeq
不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容(css,js)放在其他的子域名下(如 static.xxx.com)会有利于提高浏览器并行下载网页内容的能力。
j[$RL_U0