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

理论上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 = 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应用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年,在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇的性能提升。

时间: 2024-09-20 01:03:23

AJAX 客户端响应速度提高分析的相关文章

ASP.NET AJAX客户端生命周期分析(理论篇)

一.引言 微软的ASP.NET AJAX框架,作为一个相对比较完善的AJAX框架,有许多方面值得我们作深入研究.本文中,我们将结合一个具体的例子试图探究ASP.NET AJAX框架的客户端生命周期过程. [注]阅读本文最好要结合"ASP.NET应用程序生命周期概述"和"ASP.NET页面生命周期概述"两篇文章共同学习. 二.ASP.NET AJAX客户端生命周期原理 因为ASP.NET AJAX框架在开发思路上极大地借鉴了ASP.NET 2.0的开发技术,而且将会被

Ajax客户端响应速度分析

理论上AJAX技术在很大的程度上可以减少用户操作的等待时间,同时节约网络上的数据流量.而然,实际情况却并不总是这样.用户时常会抱怨用了AJAX的系统响应速度反而降低了. 导致这种结果的根本原因并不在AJAX, 很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的.下面我们就来分析几个AJAX开发过程中需要时刻注意的环节. 合理的使用客户端编程和远程过程调用 客户端的编程主要都是基于JavaScript的.而JavaScript是一种解释型的编程语言,它的运行效率相对于Ja

ASP.NET AJAX客户端生命周期分析(实践篇)

一.引言 在上篇中,我们对微软的ASP.NET AJAX框架的客户端生命周期过程作了理论上的分析.在本篇中,我们要结合一个具体示例针对页面的客户端生命周期期间有关重要事件的发生顺序进行剖析. 二.举例 (一)说明 下面的这个例子展示了在一个有两个嵌套的UpdatePanel控件的页面的客户端事件将被如何引发.请注意点击父面板中的按钮与内嵌的UpdatePanel控件中按钮之间的区别.在父面板中的按钮将引起父面板的更新,而嵌在内部的面板将被删除并重新创建.内嵌面板的按钮点击仅引起内嵌面板的更新.

ASP.NET AJAX客户端编程之旅(七)——剩下的问题(完结篇)

关于Loading... 相信做Ajax应用的朋友没有不使用loading的,不然网络延迟会让用户体验非常差,而且用户会不知道系统正在工作.那么当使用ASP.NET AJAX客户端编程时,怎么做loading呢? 我们先来分析一下loading应该什么时候显示,什么时候终止.一个典型的异步交互过程如下: 1.用户发出请求 2.网络延迟 3.服务器端处理 4.服务器返回数据 5.网络延迟 6.客户端呈现数据 在这个交互过程中,loading应该在第一步后出现,而在第六步结束后才消失.结合前面的知识

ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件

通过前面的文章,我们了解了ASP.NET AJAX框架的很多知识.在这一篇文章中,我们来做一个自己的ASP.NET AJAX客户端控件:PasswordValidator.这个控件关联到的DOM元素是一个span或div,并且关联到一个password类型的input标签,当用户在input中输完密码并且这个input失去焦点时,检测用户输入的密码是否合理,如果合理,则给出这个密码的安全程度. 从这一篇开始,将使用VS2008作为IDE,请朋友们注意. 建立AJAX客户端控件控件的骨架 在以前的

ASP.NET AJAX客户端编程之旅(五)

ASP.NET AJAX客户端编程之旅(五)--以组件的思想开发Ajax应用:行为.绑定及xml-script 初识行为组件 行为组件一词中的"行为"是从单词Behavior直译过来的.但是我个人认为,就其作用来说,应该叫"属性赋予组件"更合适一点.因为行为组件实际的作用是:为某一控件赋予某种属性.例如ClickBehavior是为某个控件添加"具有单击事件"这个属性,而OpacityBehavior则是为控件添加"透明显示"

ASP.NET AJAX客户端编程之旅(二)——知其所以然

如何在客户端直接调用WebService中的方法? 1.Web.config中需要配置好运行ASP.NET AJAX框架相应的配置项,当然,建立一个ASP.NET AJAX Enabled Web Site项目时,Web.config已经配置好了. 2.想让某个WebService可以被JS调用,需要做一下几步: I.在这个WebService文件里用"using System.Web.Script.Services;"引入这个命名空间. II.在这个类的上面添加"[Scri

ASP.NET AJAX客户端编程之旅(一)——Hello!ASP.NET AJAX

前言 我想,如果今天哪个Web开发人员说没有听说过Ajax技术,那实在太不可思议了.确实,近几年,Ajax这个词以超乎想象的速度红遍Web开发领域,大到Google.网易,小到一些地方公司的主页,都普遍开始加入Ajax元素.这种技术,给Web开发带来了革命性的意义,也使得Web产品及B/S系统的用户体验大大改善. 然而,Ajax用起来华丽.爽快,开发起来却困难重重.JavaScript语言怪异的语法.没有IDE支持以及难以调试,都成为Ajax开发的硬伤.另外B/S系统和C/S不同,浏览器的多样性

ASP.NET AJAX客户端编程之旅(四)

ASP.NET AJAX客户端编程之旅(四)--以组件的思想开发Ajax应用:客户端组件初探 以组件的思想重新审视Ajax客户端开发 在进入主题之前,我想和大家一起再来看一下本文章系列第一篇中的一个Demo:ASPNETAJAXTest.我现在将其中的客户端代码重新贴在这里. Default.aspx: 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs&q