Web应用前端性能优化浅析

Web应用前端性能优化浅析
摘要:对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。

一般可以从前端和后端的优化来改善Web站点性能。

本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S系统前端性能优化的常见规则和有效方法。

关键词:Web应用前端性能优化
1 HTTP请求优化
减少页面的HTTP请求次数是首先要做的一步,这是改良初次访问用户等待时间的最重要的方法。

1.1 图片地图
在站点导航中,最常见的应用就是超链接,它通常带有一些文本,并被关联到目标URL上。

一种更为没关的选择是将超链接关联到图片上,例如在导航栏或按钮中。

如果是以这种形式关联多个带有超链接的图片,使用图片地图既能减少HTTP请求,又无需改变页面外观感受。

图片地图(Image Map)允许你在一个图片上关联多个URL,目标URL的选择取决于用户单击了图片上的哪个位置。

获取图片地图的时间比获取为每个超链接使用分离图片的导航时间快很多,这是因为
图片地图减少了HTTP请求。

1.2 内联图片
内联图片是指在Web页面中包含图片但无需任何额外的HTTP 请求,它允许将小块数据内联为立即数,数据就在其URL自身之中,格式如下:
data:[<mediatype>[;base64],<data>
示例:
<img src=”data:image/gif;base64, R01god1HD=wAEEADs” >
data: URL模式大多数用于内联图片,也可以用在任何需要指定URL的地方,如:script和a标签中。

1.3 合并脚本和样式表
大多数Web站点,都会用到JavaScript脚本和层叠样式表,通常把脚本和样式表分别保存在独立的.js和.css文件中,然后在Web页面中引用。

为了符合模块化的开发原则,通常不会将JavaScript代码和CSS 代码放在同一个文件中。

分散保存的JavaScript代码应该合并在一个文件中,样式表也应该合并,这样可以使用户在浏览网页时只需下载一个.js或者.css文件,这样减少了HTTP请求,从而减少响应时间,提高访问速度。

2 客户端缓存优化
使用客户端缓存可以优化Web性能,减少用户等待的时间。

减少HTTP请求的方式可以明显提高用户首次访问Web站点的速度,客户端缓存的使用,对于页面的首次访问是不会减少响应时间的,对性能的提高会在再次访问同一个页面的时候体现出来。

在设计Web页面的时候,首次访问的响应时间并不是唯一需要考虑的。

如果这样,可以不在页面上放置任何图片、脚本和样式表,就能够把减少HTTP请求发挥到极致。

然而,我们都知道,图片、脚本和样式表可以加强用户体验,但是又会让页面的加载时间更长。

通过对脚本,样式表,图片和Flash使用一个长久的Expires头,使这些组件被缓存,就使得在浏览器浏览后续的页面时避免了不必要的HTTP请求。

Web服务器使用Expires头告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止。

如:
Expires:Thu,22 Apr 2012 12:00:00 GMT
它表示浏览器该响应的有效性持续到2012年4月22日为止。

如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片,将HTTP请求的数量减少。

3 压缩技术
除了减少和限制不必要的HTTP请求来解决响应时间的问题外,还可以通过减小HTTP响应的大小,在传输前对文件进行压缩,进一步减少响应时间。

从HTTP 1.1开始,Web客户端就可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持:
Accept-Encoding: gzip, deflate
如果Web服务器在请求的文件头中检测到上面的代码,就会以客户端列出来的方法中的一种来压缩响应内容。

Web服务器把压缩方法通过响应文件头中的Content-Encoding来返回给浏览器: Content-Encoding: gzip
Gzip是目前最盛行也是最有效的压缩方式,这是由GNU项目开发的一种免费的格式,并被标准化为RFC 1952。

另外一种压缩格式是deflate,但是它的效果较差而且不太流行。

Gzip大约可以减少70%的响应大小,目前约有90%通过浏览器传输的互联网互换支持gzip格式。

Gzip压缩所有可能的文件类型,是减少文件体积,增加用户体验的最好方法。

4 页面元素的优化
4.1 CSS放在页面顶部
除了HTML文档外,其他很多组件也都是呈现页面内容所必需的。

Web页面的所有内容,通常是按照他们在文档中出现的先后顺序下载的。

样式表在Web页面中放置的位置对于Web页面性能的影响是很明显的。

如果把样式表放在页面底部,实际产生的页面速度比放在页面顶部慢;将样式表放在文档顶部的head标签中,能使页面加载得更快。

4.2 脚本置于页面底部
脚本带来的问题就是它阻拦了页面的平行下载。

HTTP 1.1规范建议,浏览器每个主机名的并行下载内容不超过两个。

如果你的图片放在多个主机名上,你可以在每一个并行下载中同时下载2个以上的文件。

但是当下载脚本时,浏览器就不会同时下载其它文件了,即使是主机名不相同,这是因为脚本可能使用document.write来修改页面内容,因此浏览器会等待,以确保页面能够恰当地布局。

脚本对Web页面的影响表现在两个方面,一是脚本会阻塞其后面内容的呈现,另外脚本会阻塞对其后面组件的下载。

所以,如果将脚本放在页面顶部,页面中的所有内容都位于脚本之后,整个页面的呈现和
下载都会被阻塞,直到脚本加载完毕。

放置脚本的最好地方是页面的底部。

这不会阻止页面内容的呈现,而且页面中的可视组件可以尽早下载,虽然其请求时间较长,但对页面影响很小,可以很好提高用户的体验。

5 结语
对于Web应用开发人员来说,在编写Web应用时注意性能问题。

本文仅针对Web应用的前端性能优化作了简要分析,提出了一些Web 站点前端性能优化技术的方法,但还有很多与前台性能相关的问题还没有涉及到,比如避免使用CSS表达式、减少DNS查找、精简JavaScript、避免重定向、配置ETag、使用Ajax优化请求等。

Web站点的性能分析不仅仅是一种技术,更是一门艺术。

通过性能优化,尽可能确保Web站点能够满足人们对性能方方面面的要求。

参考文献
[1] 孙友仓.提高ASP．NET应用程序性能方法浅析[J].福建电脑,2006(10).
[2] 谭建平.Web网站系统性能优化研究及其应用[D].重庆大
学,2008(5).
[3] 夏素霞.谈谈WEB设计中的优化方法[J].电脑开发与应用,2002(2).。