- 浏览: 457128 次
- 性别:
- 来自: 潘多拉
文章分类
最新评论
-
lijunwyf:
代码好像不完整,后端没串起来的感觉
Json-RPC for java首次尝试 -
jerry.chen:
我用这种方式去,貌似没啥效果,楼主!
Xfire开发的webservice客户端超时问题解决 -
漫步邃思:
这个问题常遇到,老是想不起来解决方法,记住了
resin3.1.0无法解析EL表达式问题解决 -
dampce032:
在不删掉integratedSecurity=true;的情况 ...
JDBC 连接SQLServer数据库(Failed to load the sqljdbc_auth.dll) -
kill_e680:
取CPU号和取硬盘号,在linux下可以用吗?
sigar使用:在web中应用sigar取得系统信息
很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的。下面我们就来分析几个AJAX开发过程中需要时刻注意的环节。
合理的使用客户端编程和远程过程调用。
客户端的编程主要都是基于JavaScript的。而JavaScript是一种解释型的编程语言,它的运行效率相对于Java等都要稍逊一筹。同时JavaScript又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻辑可以在客户端执行应该有一个清醒的认识。
在实际的应用中究竟应该怎样使用客户端编程,这依赖于开发人员的经验判断。这里很多问题是只可意会的。由于篇幅有限,在这里我们大致归纳出下面这几个注意事项:
尽可能避免频繁的使用远程过程调用,例如避免在循环体中使用远程过程调用。
如果可能的话尽可能使用AJAX方式的远程过程调用(异步方式的远程过程调用)。
避免将重量级的数据操作放置在客户端。例如:大批量的数据复制操作、需要通过大量的数据遍历完成的计算等。
改进对DOM对象的操作方式。
客户端的编程中,对DOM对象的操作往往是最容易占用CPU时间的。而对于DOM对象的操作,不同的编程方法之间的性能差异又往往是非常大的。
以下是三段运行结果完全相同的代码,它们的作用是在网页中创建一个10x1000的表格。然而它们的运行速度却有着天壤之别。
/* 测试代码1 - 耗时: 41秒*/
这里的“测试代码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秒 */
避免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支持方式的代码 */
一般而言,GZIP对于HTML、JSP的压缩比可以达到80%左右,而它造成的服务端和客户端的性能损耗几乎是可以忽略的。结合其他因素,支持GZIP的网站有可能为我们节约50%的网络流量。因此GZIP的使用可以为那些网络环境不是特别好的应用带来显著的性能提升。使用Http的监视工具Fiddler可以方便的检测出网页在使用GZIP前后的通讯数据量。Fiddler的下载地址是http://www.fiddlertool.com/fiddler/
关于Web应用的性能优化其实是一个非常大的话题。本文由于篇幅有限,只能涉及其中的几个细节,并且也无法将这些细节的优化方式全面的展现给大家。期望本文能够引起大家对Web应用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年,在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇的性能提升。
合理的使用客户端编程和远程过程调用。
客户端的编程主要都是基于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应用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年,在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇的性能提升。
发表评论
-
myeclipse 6.5 blue 注册码
2015-01-19 12:38 807package com.kk.test; import ja ... -
xml解析[转]
2011-09-22 17:39 901jameswxx 原创 在平时工作中,难免会遇到把XML作为数 ... -
ValidateUtil
2011-09-20 08:12 1691import java.io.Serializable; ... -
log4j中关闭Hibernate调试信息
2011-09-14 08:39 2173在tomcat启动的时候,出现这个警告: log4j:WAR ... -
log4j知识点
2011-08-29 08:56 11351、Log4j.properties中至少有一个appende ... -
解决AJAX传送中文会导致乱码的问题
2011-07-16 09:46 911使用POST的时候: //如果传送参数是直接赋予的,就会产生乱 ... -
提升网站程序开发安全的6大诀窍
2011-07-16 09:43 8291.前后、端都要检查使用者输入 许多程序开发人员喜欢用Java ... -
Web测试方法
2011-07-16 09:34 16在Web工程过程中,基于Web系统的测试、确认和验收是一项重要 ... -
Ajax-------IE和FIREFOX 脚本的一些区别
2011-07-16 09:13 9951:innerText IE支持,FIREFO ... -
一段截屏的代码
2011-07-15 17:14 894import java.awt.Dimension ... -
Java实现给图片添加水印
2011-07-15 16:38 1018package com.ccniit.url; im ... -
始终会用上的Common BeanUtils
2011-07-15 16:37 819Beanutils用了魔术般的反射技术,实现了很多夸张有用的功 ... -
JAVA生成缩略图
2011-07-15 16:34 1318方法1:[第一种方法比后一种生成的缩略图要清晰] imp ... -
JAVA编程技巧之如何实现HTTP的断点续传
2011-07-15 16:32 993(一)断点续传的原理 其实断点续传的原理很简单,就是在Htt ... -
jspSmartUpload上传下载全攻略
2011-07-15 16:27 1218一、安装篇 jspsmartupload是由www.js ... -
关于Java的Cookie操作
2011-07-15 16:05 9491.设置Cookie 1Cookie cookie ... -
Javamail操作指南
2011-07-15 16:03 1399怎样才算比较完整的Javamail操作指南?我想应该包括绝大多 ... -
SQLHelper类(Java版)
2011-07-15 15:38 1577SQLHelper类(Java版), 模仿微软提供的SQLHe ... -
java汉字转拼音
2011-07-15 15:15 1098//将汉字转换为全拼 public static Str ... -
Java 调用CMD 命令
2011-07-15 15:07 1328java的Runtime.getRuntime().exec( ...
相关推荐
用户时常会抱怨用了AJAX的系统响应速度反而降低了。 笔者从事AJAX方面的研发多年,参与开发了目前国内较为成熟的AJAX平台-dorado。根据笔者的经验,导致这种结果的根本原因并不在AJAX。很多时候系统响应速度的降低都...
在线交规考试源码 ...提高AJAX客户端响应速度 AJAX的出现极大的改变了Web应用客户端的操作模式,它使的用户可以在全心工作时不必频繁的忍受那 令人厌恶的页面刷新 用到Timer,进行倒计时及世界结束事件。
针对传统的企业级Web应用开发中客户端与服务器端之间存在数据传输效率和响应速度低、用户体验差的问题,提出了一种基于Struts2+jQuery Ajax的企业级Web应用开发方案,并将该方案运用到中小型煤炭企业客户关系管理系统...
1.1 为什么需要Ajax富客户端? 1.1.1 比较用户体验 1.1.2 网络延迟 1.1.3 异步交互 1.1.4 独占或瞬态的使用模式 1.1.5 忘掉Web 1.2 Aiax的四个基本原则 1.2.1 浏览器中的是应用而不是内容 1.2.2 服务器交付的是数据而...
摘 要:针对电子地图交互操作过程中的响应速度问题,从地图小图像拼接的角度出发,提出一种基于AJAX技术的电子地图平滑移动算法。当对电子地图进行平移操作时,地图小图像能够迅速、平滑地拼接成为一幅完整的地图...
这种转变避免了繁琐的部署工作,同时也体现了瘦客户的开发理念,但同步交互方式带来客户端响应速度慢的问题始终困扰着最终用户。基于Ajax(Asynchronous JavaScript. and XML)的Web 2.0技术改变原有的同步交互为异步...
存资源的占用降至最低水平,并通过gzip压缩进一步缩减服务器的网络带宽消耗,提高响应速度 。 无Session设计杜绝了用户会话无故丢失的尴尬,客户端关联的会话加密方式带来了用户数据的高安全性,独特的 XSL结构...
这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 3.2.1XmlHttpRequest对象的初始化 3.2.2XmlHttpRequest对象的方法 3.2.3XmlHttpRequest对象的属性 3.2.4发送请求的方法和属性介绍 利用...
Ajax借助异步交互技术,使得B/S模式下服务器和客户端间传输效率及响应速度具有明显提高。随着信息技术的进步,科技信息技术数据将会通过Ajax进行管理,并以可视化形式展示出来。该文首先对Ajax原理、相关技术及工作流程...
Ajax技术较好地解决了传统Web开发中数据整页提交、系统响应时间较长的问题,使...实践表明,使用基于Ajax的架构应用大大提高了系统的响应速度,使系统用户具有良好的使用体验,对各类评议系统的构建有普遍推广价值。
存资源的占用降至最低水平,并通过gzip压缩进一步缩减服务器的网络带宽消耗,提高响应速度 。 无Session设计杜绝了用户会话无故丢失的尴尬,客户端关联的会话加密方式带来了用户数据的高安全性,独特的 XSL结构...
屏弃了传统的控件开发方式,所有执行过程采用单向流的生成方式,使其对服务器CPU及内存资源的占用降至最低水平,并通过gzip压缩进一步缩减服务器的网络带宽消耗,提高响应速度 。 无Session设计杜绝了用户会话无故...
www.extjs.com是从yui-ext发展来的一套ajax控件,在下认为它是当今最好用的js...如果您的项目建立在不畅通的网络条件下,对响应速度要求严格,或者客户端操作系统过于陈旧,请不要选择extjs,也没有必要继续看下去了。
ExtJs中文教程详解 extjs是从yui-ext发展来的一套ajax控件,在下认为它是当今...如果您的项目建立在不畅通的网络条件下,对响应速度要求严格,或者客户端操作系统过于陈旧,请不要选择extjs,也没有必要继续看下去了。
针对远程信息监测系统中数据的实时采集更新问题,将AJAX和CGI应用到嵌入式Web服务器的设计中,实现了服务器与浏览器之间的动态信息...现场实验结果表明,嵌入式Web服务器降低了服务器端的资源开销,提高了响应速度。