`
jessen163
  • 浏览: 466583 次
  • 性别: Icon_minigender_1
  • 来自: 潘多拉
社区版块
存档分类
最新评论

提高AJAX客户端响应速度

    博客分类:
  • Util
阅读更多
       很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的。下面我们就来分析几个AJAX开发过程中需要时刻注意的环节。
       合理的使用客户端编程和远程过程调用。
       客户端的编程主要都是基于JavaScript的。而JavaScript是一种解释型的编程语言,它的运行效率相对于Java等都要稍逊一筹。同时JavaScript又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻辑可以在客户端执行应该有一个清醒的认识。
在实际的应用中究竟应该怎样使用客户端编程,这依赖于开发人员的经验判断。这里很多问题是只可意会的。由于篇幅有限,在这里我们大致归纳出下面这几个注意事项:
       尽可能避免频繁的使用远程过程调用,例如避免在循环体中使用远程过程调用。
       如果可能的话尽可能使用AJAX方式的远程过程调用(异步方式的远程过程调用)。
       避免将重量级的数据操作放置在客户端。例如:大批量的数据复制操作、需要通过大量的数据遍历完成的计算等。
       改进对DOM对象的操作方式。
       客户端的编程中,对DOM对象的操作往往是最容易占用CPU时间的。而对于DOM对象的操作,不同的编程方法之间的性能差异又往往是非常大的。

以下是三段运行结果完全相同的代码,它们的作用是在网页中创建一个10x1000的表格。然而它们的运行速度却有着天壤之别。
/* 测试代码1 - 耗时: 41秒*/
var table = document.createElement("TABLE");
document.body.appendChild(table);
for(var i = 0; i < 1000; i++){
  var row = table.insertRow(-1);
  for(var j = 0; j < 10; j++){
    var cell = objRow.insertCell(-1);
  	cell.innerText = "( " + i + " , " + j + " )";
  }
}

/* 测试代码2 - 耗时: 7.6秒 */
var table = document.getElementById("TABLE");
document.body.appendChild(table);
var tbody = document.createElement("TBODY");
table.appendChild(tbody);
for(var i = 0; i < 1000; i++){
  var row = document.createElement("TR");
  tbody.appendChild(row);
  for(var j = 0; j < 10; j++){
    var cell = document.createElement("TD");
  	row.appendChild(cell);
  	cell.innerText = "( " + i + " , " + j + " )";
  }
}

/* 测试代码3 - 耗时: 1.26秒 */
var tbody = document.createElement("TBODY");
for(var i = 0; i < 1000; i++){   
  var row = document.createElement("TR");
	for(var j = 0; j < 10; j++){
    var cell = document.createElement("TD");
  	cell.innerText = "( " + i + " , " + j + " )";
  	row.appendChild(cell);
  }
  tbody.appendChild(row);
}
var table = document.getElementById("TABLE");
table.appendChild(tbody); 
document.body.appendChild(table);

这里的“测试代码1”和“测试代码2”之间的差别在于在创建表格单元时使用了不同的API方法。而“测试代码2”和“测试代码3” 之间的差别在于处理顺序的略微不同。
“测试代码1”和“测试代码2”之间如此大的性能差别我们无从分析,目前所知的是insertRow和insertCell是DHTML中表格特有的API,createElement和appendChild是W3C DOM的原生API。而前者应该是对后者的封装。不过,我们并不能因此而得出结论认为DOM的原生API总是优于对象特有的API。建议大家在需要频繁调用某一API时,对其性能表现做一些基本的测试。
“测试代码2”和“测试代码3”之间的性能差异主要来自于他们的构建顺序不同。“测试代码2”的做法是首先创建最外层的<TABLE>对象,然后再在循环中依次创建<TR>和<TD>。而“测试代码3”的做法是首先在内存中由内到外的构建好整个表格,最后再将它添加到网页中。这样做的目的是尽可能的减少浏览器重新计算页面布局的次数。每当我们将一个对象添加到网页中时,浏览器都会尝试对页面中的控件的布局进行重新计算。所以,如果我们能够首先在内存中将整个要构造的对象全部创建好,然后再一次性的添加到网页中。那么,浏览器将只会做一次布局的重计算。总结为一句话那就是越晚执行appendChild越好。有时为了提高运行效率,我们甚至可以考虑先使用removeChild将已存在的控件从页面中移除,然后构造完成后再重新将其放置回页面当中。
 提高字符串累加的速度
在使用AJAX提交信息时,我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交。尽管提交这样大的信息的做法看起来并不优雅,但有时我们可能不得不面对这样的需求。那么JavaScript中对字符串的累加速度如何呢?我们先来做下面的这个实验。累加一个长度为30000的字符串。
/* 测试代码1 - 耗时: 14.325秒 */
var str = "";
for (var i = 0; i < 50000; i++) {
	str += "xxxxxx";
}
这段代码耗时14.325秒,结果并不理想。现在我们将代码改为如下的形式:
/* 测试代码2 - 耗时: 0.359秒 */
var str = "";
for (var i = 0; i < 100; i++) {
	var sub = "";
	for (var j = 0; j < 500; j++) {
		sub += "xxxxxx";
	}
	str += sub;
}
这段代码耗时0.359秒!同样的结果,我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。
/* 测试代码3 - 耗时: 0.140秒 */
var str = "";	
for (var i1 = 0; i1 < 5; i1++) {
	var str1 = "";
	for (var i2 = 0; i2 < 10; i2++) {
		var str2 = "";
		for (var i3 = 0; i3 < 10; i3++) {
			var str3 = "";
			for (var i4 = 0; i4 < 10; i4++) {
				var str4 = "";
				for (var i5 = 0; i5 < 10; i5++) {
					str4 += "xxxxxx";
				}
				str3 += str4;
			}
			str2 += str3;
		}
		str1 += str2;	
	}
	str += str1;	
}
不过,上面这种做法也许并不是最好的!如果我们需要提交的信息是XML格式的(其实绝大多数情况下,我们都可以设法将要提交的信息组装成XML格式),我们还能找到更高效更优雅的方法—利用DOM对象为我们组装字符串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。
/* 利用DOM对象组装信息 - 耗时: 0.890秒 */
var xmlDoc;	
if (browserType == BROWSER_IE) {
	xmlDoc = new ActiveXObject("Msxml.DOMDocument");
}
else {
	xmlDoc = document.createElement("DOM");
}
var root = xmlDoc.createElement("root");
for (var i = 0; i < 50000; i++) {
	var node = xmlDoc.createElement("data");
	if (browserType == BROWSER_IE) {
		node.text = "xxxxxx";
	}
	else {
		node.innerText = "xxxxxx";
	}
	root.appendChild(node);
}
xmlDoc.appendChild(root);

var str;
if (browserType == BROWSER_IE) {
	str = xmlDoc.xml;
}
else {
	str = xmlDoc.innerHTML;
}

避免DOM对象的内存泄漏。
关于IE中DOM对象的内存泄露是一个常常被开发人员忽略的问题。然而它带来的后果却是非常严重的!它会导致IE的内存占用量持续上升,并且浏览器的整体运行速度明显下降。对于一些泄露比较严重的网页,甚至只要刷新几次,运行速度就会降低一倍。
比较常见的内存泄漏的模型有“循环引用模型”、“闭包函数模型”和“DOM插入顺序模型”,对于前两种泄漏模型,我们都可以通过在网页析构时解除引用的方式来避免。而对于“DOM插入顺序模型”则需要通过改变一些惯有的编程习惯的方式来避免。

有关内存泄漏的模型的更多介绍可以通过Google很快的查到,本文不做过多的阐述。不过,这里我向您推荐一个可用于查找和分析网页内存泄露的小工具—Drip,目前的较新版本是0.5,下载地址是http://outofhanwell.com/ieleak/index.php
复杂页面的分段装载和初始化
对系统当中某些确实比较复杂而又不便使用IFrame的界面,我们可以对其实施分段装载。例如对于多页标签的界面,我们可以首先下载和初始化多页标签的默认页,然后利用AJAH(asynchronous JavaScript and HTML)技术来异步的装载其他标签页中的内容。这样就能保证界面可以在第一时间首先展现给用户。把整个复杂界面的装载过程分散到用户的操作过程当中。
利用GZIP压缩网络流量。
除了上面提到的这些代码级的改良之外,我们还可以利用GZIP来有效的降低网络流量。目前常见的主流浏览器已经全部支持GZIP算法,我们往往只需要编写少量的代码就可以支持GZIP了。例如在J2EE中我们可以在Filter中通过下面的代码来判断客户端浏览器是否支持GZIP算法,然后根据需要利用java.util.zip.GZIPOutputStream来实现GZIP的输出。
/* 判断浏览器对GZIP支持方式的代码 */
private static String getGZIPEncoding(HttpServletRequest request) {
  String acceptEncoding = request.getHeader("Accept-Encoding");
  if (acceptEncoding == null) return null;
  acceptEncoding = acceptEncoding.toLowerCase();
  if (acceptEncoding.indexOf("x-gzip") >= 0) return "x-gzip";
  if (acceptEncoding.indexOf("gzip") >= 0) return "gzip";
  return null;
}

一般而言,GZIP对于HTML、JSP的压缩比可以达到80%左右,而它造成的服务端和客户端的性能损耗几乎是可以忽略的。结合其他因素,支持GZIP的网站有可能为我们节约50%的网络流量。因此GZIP的使用可以为那些网络环境不是特别好的应用带来显著的性能提升。使用Http的监视工具Fiddler可以方便的检测出网页在使用GZIP前后的通讯数据量。Fiddler的下载地址是http://www.fiddlertool.com/fiddler/
关于Web应用的性能优化其实是一个非常大的话题。本文由于篇幅有限,只能涉及其中的几个细节,并且也无法将这些细节的优化方式全面的展现给大家。期望本文能够引起大家对Web应用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年,在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇的性能提升。
分享到:
评论

相关推荐

    AJAX 客户端响应速度提高分析

    总的来说,要提高AJAX客户端的响应速度,开发者需要注意以下几点: 1. 合理规划客户端和服务器端的职责,避免过度依赖客户端计算。 2. 使用异步RPC,减少用户等待时间。 3. 优化DOM操作,减少不必要的计算和内存分配...

    ASP.NET3.5 AJAX客户端编程精选166例(使用C#)

    结合这两种技术,可以创建出响应速度快、用户体验良好的Web应用。 #### 二、C#在ASP.NET中的角色 C#是一种现代的面向对象编程语言,以其简洁、高效和安全著称。在ASP.NET 3.5中,C#作为首选的开发语言,用于编写...

    ajax在线交规考试源码

    在线交规考试源码 ...提高AJAX客户端响应速度 AJAX的出现极大的改变了Web应用客户端的操作模式,它使的用户可以在全心工作时不必频繁的忍受那 令人厌恶的页面刷新 用到Timer,进行倒计时及世界结束事件。

    Ajax客户端编程的基本讲解及示例

    通过学习和实践这些Ajax客户端编程的关键知识点,开发者能够创建出响应速度快、用户体验良好的Web应用。在本教程中,"第42讲、第41讲、第40讲"可能会依次深入讲解这些概念,帮助初学者逐步掌握Ajax技术。

    编写高性能的javascrip一些资料

    在JavaScript的世界里,性能优化是开发者...对于提供的文档“提高AJAX客户端响应速度.doc”和“编写高性能JavaScript.doc”,它们很可能会深入探讨这些话题,通过阅读这些文档,开发者可以获取更多实用技巧和最佳实践。

    Ajax获取响应内容长度的方法

    至于提高Ajax客户端响应速度,可以从多个方面入手:减少HTTP请求次数(通过合并CSS和JS文件、使用数据URI等)、压缩传输数据、利用浏览器缓存、优化服务器性能等。同时,确保jQuery的Ajax设置正确,如设置适当的缓存...

    利用Ajax提高页面载入速度

    4. **动态更新页面**:Ajax通过局部更新页面,而非全页刷新,实现了页面内容的实时更新,提高了页面的交互性和响应速度。 #### Ajax技术的组成 Ajax技术并非单一技术,而是由一系列技术组合而成,包括但不限于: -...

    AJAX异步数据通讯机制在Web程序中的应用.pdf

    4. 提高客户端响应速度:AJAX技术可以提高客户端响应速度,因为客户端可以异步请求数据,不需要等待服务器端处理数据请求。 在应用中,AJAX异步数据通讯机制存在一些局限性,例如: 1. 兼容性问题:AJAX技术需要...

    ASP.NET AJAX深入浅出系列课程(21):利用Microsoft AJAX Library开发客户端组建(上)

    7. **性能优化**:由于AJAX应用可能导致多个并发请求,因此课程可能涵盖如何优化AJAX请求以减少服务器负载和提高响应速度。 通过本课程的学习,开发者将能够熟练掌握利用Microsoft AJAX Library开发客户端组件的...

    asp.net客户端AJAX

    这极大地提高了Web应用的响应速度和交互性,用户可以享受到类似桌面应用的流畅体验。下面将详细阐述ASP.NET客户端AJAX的相关知识点。 1. **AJAX(异步JavaScript和XML)基础**: AJAX的核心是通过JavaScript在后台...

    为响应客户端回发而加载该页

    传统的客户端回发会导致整个页面刷新,可能造成用户体验延迟,而现代Web应用倾向于采用局部更新(Partial Rendering)或异步更新(Asynchronous Update)技术,如Ajax,来减少不必要的页面重载,提高应用响应速度。...

    Ajax技术在信息系统项目中的应用与实现.pdf

    1.异步处理:Ajax技术可以异步处理客户端和服务器之间的通信,提高了网站的响应速度和可用性。 2.减少服务器负载:Ajax技术可以减少服务器端的数据负载,提高了网站的响应速度和可用性。 3.提高用户响应速度:Ajax...

    基于AJAX和Struts的Web应用的设计与实现.pdf

    Struts框架是一种基于MVC模式的Web应用程序开发框架,可以与AJAX技术结合使用,提高Web应用程序的响应速度和交互性。 在传统的Web服务中,客户端和服务器端需要同步,客户端向服务器发送请求后,必须等待服务器的...

    Ajax技术研究与应用.pdf

    Ajax技术可以提高Web应用的交互能力,缩短客户端与服务器的通信时间,提高用户响应速度。Ajax技术的应用前景非常广泛,发展趋势包括标准化、集成和移动设备上的应用。 Ajax技术的优点和挑战: 优点: * 提高Web...

Global site tag (gtag.js) - Google Analytics