Web应用的前端性能优化

戴全平

摘 要 随着科学技术的飞速发展，人们对于各种Web应用提出了更高的要求，如果不能及时对应用进行性能优化，则其必然会被时代所淘汰。通常情况下，Web应用的性能优化可以通过前端优化和后端优化实现，本文主要针对前端性能的优化进行简要分析。

【关键词】Web应用 前端 性能优化

现如今，Web技术飞速发展，传统的以文档为核心的HTML以及XHTML标准已经逐渐无法满足实际需求。在这种情况下，新的标准设置了更加强大的应用编程接口和适用于交互、多媒体等的标签，但是，这些功能的实现都必须建立在更加优越的前端性能上，因此，做好Web应用前端性能的优化非常重要。

1 HTTP请求优化

在对HTTP请求进行优化时，必须在保证Web应用处理性能的基础上，减少页面的请求次数，从而对初次访问用户的等待时间进行缩减。具体来讲，一是可以利用图片地图，因为在站点导航环节，超链接是最为常见的一种应用形式，其本身附带有一定的文本，并且被关联到了目标URL上。从美观性考虑，可以将超链接关联到图片上，通过这种形式，可以在不改变页面外观感受的情况下，利用图片地图来减少HTTP请求，提高导航的效率；二是利用内联图片，指将图片包含在Web页面中，但是不需要添加额外的HTTP请求，这种方式允许将小块数据内联为立即数，将数据放在其URL之中；三是对脚本和样式表进行合并。通常情况下，多数Web站点的构建中都会用到Java Script脚本以及层叠样式表，而且两者分别存储在不同的文件中，在Web页面引用。从应用开发中的模块化思想考虑，一般情况下，Java Script代码以及CSS代码不会被放在同一个文件中，而应该将分散保存的Java Script代码合并在一起，同时对样式表进行合并，使得用户在浏览网页时，只需要下载一个.js文件或者.css文件，减少系统的响应时间。

2 客户端缓存优化

通过客户端缓存的方式，能够在很大程度上对Web性能进行优化，极大的缩减用户的等待时间。客户端缓存的应用，虽然无法在用户初次访问网页时对响应时间进行减少，不过如果用户需要再次对同一个页面进行访问，则性能的优化效果就会充分体现出来。在针对Web页面进行设计时，首次访问的响应时间非常重要，但是其并不是唯一需要考虑的因素。如果只考虑缩减首次访问的响应时间，则只需要去掉页面中的图片、样式表和脚本，就能够将HTTP的请求减少到极限。但是实际上，如果采用这种方式，用户的体验也就难以保证。

而通过对客户端缓存的优化，可以利用长久的Expires头，实现对图片、样式表、脚本乃至Flash等的缓存，使得在进行后续页面的浏览时，减少不必要的HTT请求，提高访问速度。Expires头的使用，实际上是告诉Web客户端其能够在指定的时间内，使用一个组件的当前副本。例如，Expires：Thu，1 Apr 2016 12：00：00GMT，表示浏览器相应的有效性持续到2016年4月1号。若页面中的图片返回到了这个头，在进行后续页面浏览时，会继续使用缓存的图片，从而减少HTTP请求的数量。

3 页面元素优化

一方面，可以将CSS设置在页面的顶部。对于Web页面而言，包括HTML文档在内的许多组件都是必须的，其能够将不同的页面内容呈示在用户面前，Web页面中内容可以依照其在文档中出现的顺序进行下载。以样式表为例，其在Web页面中的位置直接影响着页面的整体性能，如果将其放在底部，则产生页面的速度会减缓，如果将其放在文档顶部的head标签中，则页面的加载速度会有所提升。

另一方面，可以将脚本设置在页面底部。脚本是Web页面设置中不可或缺的组件，但是其存在会在一定程度上阻拦页面的平行下载。在HTTP1.1规范中，建议浏览器的每一个主机名并行下载的内容不能超过两个。因此，如果图片被放在多个主机名上，则可以在每一个并行下载中，同时下载多个文件。而如果需要下载脚本，浏览器会自动屏蔽其他文件的下载，即使采用不同的主机名。之所以如此，是由于脚本本身能够使用document.write进行页面内容的改写，为了保证页面布局的合理性，浏览器会出现等待的情况。因此，可以将脚本设置在页面底部，这样不会阻止页面内容的呈现，虽然请求时间会有所延长，但是可以保证良好的用户体验。

4 结语

总而言之，在进行Web应用的编写时，必须关注其性能问题，针对前端性能进行优化，在保证良好用户体验的同时，提升页面的访问速度，减少响应时间，以满足人们对于Web应用在性能方面的各种要求。

参考文献

[1]王成，李少元，郑黎晓，等.Web前端性能优化方案与实践[J].计算机应用与软件，2014，31（12）：89-95，147.

[2]林丁报，景宏磊.Web应用前端性能优化浅析[J].科技资讯，2011（19）：25.

[3]丁海鹏，张旭阳.基于Web的应用系统前端页面性能优化[J].福建电脑，2012，28（05）：11-12.

作者单位

武汉纺织大学计算机学院 湖北省武汉市 430200