AJAX的出现极大的改变了Web应用客户端的操作模式,它使的用户可以在全心工作时不必频繁的忍受那令人厌恶的页面刷新。理论上AJAX技术在很大的程度上可以减少用户操作的等待时间,同时节约网络上的数据流量。而然,实际情况却并不总是这样。用户时常会抱怨用了AJAX的系统响应速度反而降低了。
笔者从事AJAX方面的研发多年,参与开发了目前国内较为成熟的AJAX平台-dorado。根据笔者的经验,导致这种结果的根本原因并不在AJAX。很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的。下面我们就来分析几个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 = ; i < ; i++){
var row = table.insertRow(-);
for(var j = ; j < ; j++){
var cell = objRow.insertCell(-);
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 = ; i < ; i++){
var row = document.createElement("TR");
tbody.appendChild(row);
for(var j = ; j < ; j++){
var cell = document.createElement("TD");
row.appendChild(cell);
cell.innerText = "( " + i + " , " + j + " )";
}
} /* 测试代码3 - 耗时: 1.26秒 */
var tbody = document.createElement("TBODY");
for(var i = ; i < ; i++){
var row = document.createElement("TR");
for(var j = ; j < ; 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 = ; i < ; i++) {
str += "xxxxxx";
}
这段代码耗时14.325秒,结果并不理想。现在我们将代码改为如下的形式:
/* 测试代码2 - 耗时: 0.359秒 */
var str = "";
for (var i = ; i < ; i++) {
var sub = "";
for (var j = ; j < ; j++) {
sub += "xxxxxx";
}
str += sub;
}
这段代码耗时0.359秒!同样的结果,我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。
/* 测试代码3 - 耗时: 0.140秒 */
var str = "";
for (var i1 = ; i1 < ; i1++) {
var str1 = "";
for (var i2 = ; i2 < ; i2++) {
var str2 = "";
for (var i3 = ; i3 < ; i3++) {
var str3 = "";
for (var i4 = ; i4 < ; i4++) {
var str4 = "";
for (var i5 = ; i5 < ; 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 = ; i < ; 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.,下载地址是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") >= ) return "x-gzip";
if (acceptEncoding.indexOf("gzip") >= ) return "gzip";
return null;
}
一般而言,GZIP对于HTML、JSP的压缩比可以达到80%左右,而它造成的服务端和客户端的性能损耗几乎是可以忽略的。结合其他因素,支持GZIP的网站有可能为我们节约50%的网络流量。因此GZIP的使用可以为那些网络环境不是特别好的应用带来显著的性能提升。使用Http的监视工具Fiddler可以方便的检测出网页在使用GZIP前后的通讯数据量。Fiddler的下载地址是http://www.fiddlertool.com/fiddler/
关于Web应用的性能优化其实是一个非常大的话题。本文由于篇幅有限,只能涉及其中的几个细节,并且也无法将这些细节的优化方式全面的展现给大家。期望本文能够引起大家对Web应用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年,在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇的性能提升。 转载:http://dorado.group.iteye.com/group/topic/7229

如何提高AJAX客户端响应速度的更多相关文章

  1. ASP.NET Ajax 客户端框架未能加载、"Sys"未定义

    在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...

  2. 170306、wamp中的Apache开启gzip压缩提高网站的响应速度

    一个网站的响应速度决定该网站的人气和质量,所以wamp配置的服务器也需要支持giz压缩来提高网站的响应速度,如何开启wamp的gzip压缩呢,经过在网站查找资料结合自己服务器中的配置,现在将这个方法分 ...

  3. asp.net ajax客户端框架如何调用Page Method

    asp.net ajax客户端框架如何调用Page Method 1:欲调用的页面方法必须声明为公有(Public)2:该方法必须为静态方法(static)3:该方法必须添加[System.Web.S ...

  4. asp.net ajax客户端框架如何调用Web Service

    asp.net ajax客户端框架如何调用Web Service 1:Web Service类添加 [System.Web.Script.Services.ScriptService]特性2:需要异步 ...

  5. ajax客户端请求与服务端响应浅谈

    AJAX,即Asynchronous Javascript And XML,AJAX本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 所谓的异步,是指某段程序执行不会阻塞其他程序执行,其表现 ...

  6. ajax+客户端与服务器端的交互

    一. AJAX 原生JS var xhr=new XMLHttpRequest(); xhr.open("GET","[请求地址]",false); xhr.o ...

  7. 第105天:Ajax 客户端与服务器基本知识

    一.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.服务器类型 - 按服务类型可分为:文件服务器.数据库服务器.邮件服务器.Web服务器等 - 按操作系统可分为:Linux服务 ...

  8. 如何提高Ajax性能

    1.适当使用缓存机制 2.使用CDN内容分发来访问Jquery脚本: (1)自己公司架设CDN服务器 (2)使用第三方公司的,比如微软,谷歌等公司的CDN,但有时候不太靠谱 3.JS/CSS文件的打包 ...

  9. 解如何利用 XML 和 JavaScript Object Notation 在 Ajax 客户端和 Java 服务器之间传输数据(代码)(Oracle)。

    ---------------------------------ajaxUtil----------------------------------------------------------- ...

随机推荐

  1. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  2. bootstrap-slider插件使用方法

    bootstrap-slider例子地址:https://seiyria.com/bootstrap-slider/ bootstrap-slider github地址:https://github. ...

  3. 关于Struts2的界面的摆放

    控件有的时候怎么放都感觉放不到自己想要的位置,这时候可以有这几个做法 1.用一个table标签来创建一个表格,再在表格里面一行一列地放,比较整齐 2.用表格,结果却发现有的控件位置莫名其妙,这时候就要 ...

  4. jquery 中json数组的操作(转)

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...

  5. hdu2147 kiki&#39;s game(博弈)

    这个是纳什博弈?不知道怎么看的 依据PN图,从左下角開始推 左下角P 最后一行都是PNPNPN 第一列都是 P N P N P 完了填完即可了 #include<cstdio> int m ...

  6. zookeeper_process内存泄露问题

    单线程模式下,不能递归调用zookeeper_process函数,否则会造成内存泄露. 下列图是在watcher中调用zookeeper_process时,用valgrind检测到的情况:

  7. 转载:MySQL数据库INSERT、UPDATE、DELETE以及REPLACE语句的用法详解

    转自:http://www.jb51.net/article/39199.htm 本篇文章是对MySQL数据库INSERT.UPDATE.DELETE以及REPLACE语句的用法进行了详细的分析介绍, ...

  8. perl chomp 函数的真正作用

    之前一直以为chomp函数只是去掉字符串末尾的\n, 但是今天写程序遇到一个bug,最后的原因就处在chomp上: 读取fasta文件,内容如下: >1 ATGCTAGCTACGTACGTACG ...

  9. 怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!

    怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为 ...

  10. 【View】之【SimpleWaveView】可多色可刷新的加速球、进度球【demo】

    当前版本:SimpleWaveView_v1.0.20140618 先看效果图,这个加速球是动态的,并且当调用了myView.setRefresh(0.8F);方法后可以从当前值动态降到0再升到80% ...