AJAX技术的性能改进研究.doc

AJAX技术的性能改进研究程远Cheng Yuan(中国联合网络通信有限公司南阳市分公司信息化支撑中心,河南南阳 473000)摘要: AJAX技术作为一种新兴的网络技术比传统页面刷新模式具有更好的性能和友好的用户体验,为开发类桌面web应用程序提供了解决方案。本文针对AJAX基本原理和性能进行了分析,并对AJAX提出了一些性能改进建议和方法,使AJAX模式带来的程序量大、首页加载时间长的缺陷得到改善,进一步提高程序性能。关键词: AJAX；性能改进由于AJAX应用将大量的运算转移到了客户端，这就给客户端带来了很大压力。 Javascript是一门解释型的语言，效率不是很高。一次加载数据过多会导致页面打开速度变慢。 频繁的服务器端调用可能带来服务器端的性能问题。因此我们提出了相应的解决方案：1选择合适的文本传输格式目前基于AJAX技术的Web开发主要采用XML进行数据交换,然而XML是一种结构化的文档,需要服务器和客户端都对其进行解析,将会占用更多的系统资源,因此采用XML进行数据交换会导致性能低下、兼容性不够、灵敏度低的问题。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于被支持JavaScript的浏览器所解析，客户端能够很好地利用JavaScript引擎来解析JSON响应,格式清晰。因此选择JSON格式更为合理，虽然JSON编写比较麻烦，但付出总有收获65。2压缩Javascript代码的体积Javascript是一种解释型语言，其所有的源代码都会被提交到客户端浏览器，因此源代码的体积会影响下载速度。要改善这种情况，一种方案就是压缩Javascript代码。经过良好的压缩后，一段Javascript代码甚至能减少到原来大小的80%以上。总的来说压缩主要包括以下几个方面: 删除无用的注释和无用空白字符，就是减少代码空间体积。 进行变量名和函数名替换，很多人为了使得程序易于理解，通常应用“getHttpRequest（）”。这样的函数名，可以改变为“G()”即可，开发过程中还保留getHttpRequest()这样的函数名以便于记忆。 这里选取EXTJS提供的文件ext-all-debug.js和ext-all.js（2个文件内容一样，前者为压缩前的Javascript代码，后者为压缩后的Javascript代码）做对比测试，从图1中可以看出该HTML文件包含5个javascript文件，图4-1是文件ext-all-debug.js未压缩的代码，文件990KB，传输时间为：2.76s；同样的代码压缩后，命名为ext-all.js，如图2，文件大为缩减：574KB，且传输时间降到：1.21s1。图1 Javascript代码压缩前图2 Javascript代码压缩后由此可以看出压缩Javascript代码体积能提高系统的响应速度。3 缓存多媒体信息为了使页面更加丰富，我们通常会在应用中使用大量的图片和视频。浏览器默认都会缓存图片以提高页面的装载性能，当图片或视频更新的时候再载入，这样就可以避免重复的加载相同的多媒体文件，保证系统的正常性能，尤其是图片、视频量大时最为明显2。4 按需载入前台代码很显然，如果一次载入所有需要的Javascript代码会使初始网页打开速度变慢。事实上，有很多载入并不是必须的，因此应该避免这种额外的开销，如果能够按需载入Javascript代码则可以有效的避免这种性能上的浪费。采用动态载入Javascript代码可以解决这一问题，如果要动态载入Javascript代码，比较简单地可以利用己有的AJAX开发框架，比如EXTJS，它采用的就是一种动态加载的方法;此外基本的动态加载方法可以通过DOM模型在HTML文档中添加 结点，并将此结点的src属性(即外联Javascript文件)设置为需要动态载入的Javascript代码3。比如： var s2 = document.createElement(script); s2.src=test.js document.body.insertAdjacentElement(BeforeBegin,s2); function loadJs(file) var scriptTag = document.getElementById(loadScript); var head = document.getElementsByTagName(head).item(0) if(scriptTag) head.removeChild(scriptTag); script = document.createElement(script); script.src = file; script.type = text/javascript; script.id = loadScript; head.appendChild(script) 通过上面这几种方法能大大改善AJAX的性能。AJAX技术比传统页面刷新模式具有更好的性能和友好的用户体验，为开发类桌面Web应用程序提供了解决方案。AJAX技术在Web 2.0中也是一个非常重要的技术。应用AJAX技术开发网站日益成为网络行业的主流选择。通过本文的研究,我们可以了解AJAX原理，看到AJAX技术的优势，并掌握一定的优化技术，希望能对AJAX程序开发提供一定帮助。参考文献：1Network Working Group: Berners L T. Hypertext Transfer ProtocolHTTP/1.0 EB/OL. 2007-12-20. 2Network Working Group: Fielding R. Hypertext Tran