��谈如何提高AJAX客户端响应速度

风舞�׃ؕ — Mon, 23 May 2011 10:08:00 GMT

��谈如何提高AJAX客户端响应速度

http://developer.51cto.com 2009-06-24 15:16 包一��? JavaEye 我要评论(0)

AJAX 的出现极大的改变�?Web 应用客户端的操作模式�Q�它使的用户可以在全心工作时不必频繁的忍受那令�h厌恶的页面刷新。理��Z�� AJAX 技术在很大的程度上可以减少用户操作的等待时��_��同时节约�|�络上的数据��量。而然�Q�实际情况却�q�不��L��q�样。用��h��怼�抱怨用�?AJAX 的系�l�响应速度反而降低了。本文将谈谈如何提高响应速度�?/ul>

�W�者从事AJAX 斚w��的研发多�q�_��参与开发了目前国内较�ؓ成熟的AJAX�q�_�� -dorado 。根据笔者的�l�验�Q�导致这�U�结果的�Ҏ(gu��)��原因�q�不在AJAX 。很多时候系�l�响应速度的降低都是由不够合理的界面设计和不够高效的编�E�习惯造成的。下面我们就来分析几�?AJAX 开发过�E�中需要时��L��意的环节�?/p>

n 合理的��用AJAX客户端编�E�和�q�程�q�程调用�?/p>

AJAX客户端的�~�程主要都是��Z�� JavaScript 的。�?JavaScript 是一�U�解释型的编�E�语�a��Q�它的运行效率相对于 Java �{�都要稍逊一�{�V��同�?JavaScript 又是�q�行在浏览器�q�样一个严格受限的环境当中。因此开发�h员对于哪些逻辑可以在客��L��执行应该有一个清醒的认识�?/p>

在实际的应用中究竟应该怎样使用客户端编�E�，�q�依赖于开发�h员的�l�验判断。这里很多问题是只可意会的。由于篇�q�有限，在这里我们大致归�U�_��下面�q�几个注意事��：

u ��可能避免频�J�的使用�q�程�q�程调用�Q�例如避免在循环体中使用�q�程�q�程调用�?/p>

u 如果可能的话��可能��?AJAX 方式的远�E�过�E�调用（异步方式的远�E�过�E�调用）�?/p>

u 避免��重量��的数据操作放�|�在客户端。例如：大批量的数据复制操作、需要通过大量的数据遍历完成的计算�{��?/p>

n 改进�?DOM 对象的操作方式�?/p>

客户端的�~�程中，�?DOM 对象的操作往往是最�Ҏ(gu��)��占用 CPU 旉��的。而对�?DOM 对象的操作，不同的编�E�方法之间的性能差异又往往是非常大的�?/p>

以下是三�D�运行结果完全相同的代码�Q�它们的作用是在�|�页中创��Z��?10x1000 的表根{��然而它们的�q�行速度却有着天壤之别�?/p>

        
            /* ���试代码 1 - 耗时 : 41 �U?nbsp;*/   
            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 �U?nbsp;*/   
            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 �U?nbsp;*/   
            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);

�q�里�?#8220;��试代码 1 ”�?#8220;��试代码 2 ”之间的差别在于在创徏表格单元时��用了不同�?API �Ҏ(gu��)��。�?#8220;��试代码 2 ”�?#8220;��试代码 3 ” 之间的差别在于处理顺序的略微不同�?/p>

“��试代码 1 ”�?#8220;��试代码 2 ”之间如此大的性能差别我们无从分析�Q�目前所知的�?insertRow �?insertCell �?DHTML 中表格特有的 API �Q?createElement �?appendChild �?W3C DOM 的原�?API 。而前者应该是对后者的��装。不�q�，我们�q�不能因此而得出结��?DOM 的原�?API ��L��优于对象�Ҏ(gu��)��?API 。徏议大家在需要频�J�调用某一 API �Ӟ��对其性能表现做一些基本的��试�?/p>

“��试代码 2 ”�?#8220;��试代码 3 ”之间的性能差异主要来自于他们的构徏��序不同�?#8220;��试代码 2 ”的做法是首先创徏最外层�?

。�?#8220;��试代码 3 ”的做法是首先在内存中由内到外的构建好整个表格�Q�最后再��它��d��到网��中。这样做的目的是��可能的减少��览器重新计��页面布局的次数。每当我们将一个对象添加到�|�页中时�Q�浏览器都会��试寚w��面中的控件的布局�q�行重新计算。所以，如果我们能够首先在内存中��整个要构造的对象全部创徏好，然后再一�ơ性的��d��到网��中。那么，��览器将只会做一�ơ布局的重计算。�ȝ��Z��句话那就是越晚执�?appendChild ��好。有时�ؓ了提高运行效率，我们甚至可以考虑先��?removeChild ��已存在的控件从��面中移除，然后构造完成后再重新将其放�|�回��面当中�?/p>

n 提高字符串篏加的速度

在��?AJAX 提交信息�Ӟ��我可能常帔R��要拼装一些比较大的字�W�串通过 XmlHttp 来完�?POST 提交。尽��提交这样大的信息的做法看�v来�ƈ不优雅，但有时我们可能不得不面对�q�样的需求。那�?JavaScript 中对字符串的累加速度如何呢？我们先来做下面的�q�个实验。篏加一个长度�ؓ 30000 的字�W�串�?/p>

        
            /* ���试代码 1 - 耗时 : 14.325 �U?nbsp;*/    
            var str = "";   
            for (var i = 0; i < 50000; i++) {   
                   str += "xxxxxx";   
            }

�q�段代码耗时 14.325 �U�，�l�果�q�不理想。现在我们将代码改�ؓ如下的�Ş式：

        
            /* ���试代码 2 - 耗时 : 0.359 �U?nbsp;*/    
            var str = "";   
            for (var i = 0; i < 100; i++) {   
                   var sub = "";   
                   for (var j = 0; j < 500; j++) {   
                          sub += "xxxxxx";   
                   }   
                   str += sub;   
            }

�q�段代码耗时 0.359 �U�！同样的结果，我们做的只是首先��D��一些较?y��u)��的字符串然后再�l�装成更大的字符丌Ӏ�这�U�做法可以有效的在字�W�串��D��的后期减��内存复制的数据量。知道了�q�一原理之后我们�q�可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时 0.140 �U��?/p>

        
            /* ���试代码 3 - 耗时 : 0.140 �U?nbsp;*/   
            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;     
            }

不过�Q�上面这�U�做法也许�ƈ不是最好的�Q�如果我们需要提交的信息�?XML 格式的（其实�l�大多数情况下，我们都可以设法将要提交的信息�l�装�?XML 格式�Q�，我们�q�能扑ֈ�更高效更优雅的方�?— 利用 DOM 对象为我们组装字�W�串。下面这�D�代买组装一个长度�ؓ 950015 的字�W�串仅须耗时 0.890 �U��?/p>

        
            /* 利用 DOM 对象�l�装信息 - 耗时 : 0.890 �U?nbsp;*/   
            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;   
            }   
            n

避免 DOM 对象的内存泄漏�?/p>

关于 IE �?DOM 对象的内存泄露是一个常常被开发�h员忽略的问题。然而它带来的后果却是非�怸�重的�Q�它会导�?IE 的内存占用量持箋上升�Q��ƈ且浏览器的整体运行速度明显下降。对于一些泄露比较严重的�|�页�Q�甚臛_��要刷新几�ơ，�q�行速度��׃��降低一倍�?/p>

比较常见的内存泄漏的模型�?#8220; 循环引用模型”�?#8220; 闭包函数模型”�?#8220; DOM 插入��序模型” , 对于前两�U�泄漏模型，我们都可以通过在网��|��构时解除引用的方式来避免。而对�?#8220; DOM 插入��序模型”则需要通过改变一些惯有的�~�程习惯的方式来避免�?/p>

有关内存泄漏的模型的更多介绍可以通过 Google 很快的查刎ͼ�本文不做�q�多的阐�q�。不�q�，�q�里我向�(zh��n)�推荐一个可用于查找和分析网��内存泄露的��工�?— Drip �Q�目前的较新版本�?0.5 �Q�下载地址�?http://outofhanwell.com/ieleak/index.php

n 复杂��面的分�D�装载和初始�?/p>

对系�l�当中某些确实比较复杂而又不便使用 IFrame 的界面，我们可以对其实施分段装蝲。例如对于多��|��{��界面�Q�我们可以首先下载和初始化多��|��{��默认��，然后利用 AJAH �Q?asynchronous JavaScript and HTML �Q�技术来异步的装载其他标�{�N��中的内容。这样就能保证界面可以在�W�一旉��首先展现�l�用戗��把整个复杂界面的装载过�E�分散到用户的操作过�E�当中�?/p>

n 利用 GZIP 压羃�|�络��量�?/p>

除了上面提到的这些代码��的改良之外，我们�q�可以利�?GZIP 来有效的降低�|�络��量。目前常见的��L��览器已�l�全部支�?GZIP ��法�Q�我们往往只需要编写少量的代码��可以支�?GZIP 了。例如在 J2EE 中我们可以在 Filter 中通过下面的代码来判断客户端浏览器是否支持 GZIP ��法�Q�然后根据需要利�?java.util.zip.GZIPOutputStream 来实�?GZIP 的输出�?/p>

        
            /* 判断���览器对 GZIP 支持方式的代�?nbsp;*/   
            private static String getGZIPEncoding(HttpServletRequest request) {   
              String acceptEncoding = request.getHeader("Accept-Encoding");   
              if (acceptEncoding == null) return null;   
              acceptEncodingacceptEncoding = acceptEncoding.toLowerCase();   
              if (acceptEncoding.indexOf("x-gzip") >= 0) return "x-gzip";   
              if (acceptEncoding.indexOf("gzip") >= 0) return "gzip";   
              return null;   
            }

一般而言�Q?GZIP 对于 HTML �?JSP 的压�~�比可以辑ֈ� 80% 左右�Q�而它造成的服务端和客��L��的性能损耗几乎是可以忽略的。结合其他因素，支持 GZIP 的网站有可能为我们节�U?50% 的网�l�流量。因�?GZIP 的��用可以�ؓ那些�|�络环境不是特别好的应用带来显著的性能提升。��?Http 的监视工�?Fiddler 可以方便的检��出�|�页在��?GZIP 前后的通讯数据量�?Fiddler 的下载地址�?http://www.fiddlertool.com/fiddler/

关于 Web 应用的性能优化其实是一个非常大的话题。本文由于篇�q�有限，只能涉及其中的几个细节，�q�且也无法将�q�些�l�节的优化方式全面的展现�l�大家。期望本文能够引起大家对 Web 应用��其是客��L��性能优化的充分重视。毕竟服务端�~�程技巧已为大家熟知多�q�_��在服务端挖掘性能的潜力已�l�不大了。而在客户端的�Ҏ(gu��)��改进往往能够得到令�h惊奇的性能提升�?/p>

【编辑推荐�?/p>

JSF和Spring的集�?/font>

JSF中��用自定义Navigation

��单介�l�JSF应用

JSF动态生成固定表头和行标的DataTable

JSF和JSP是一�Ҏ(gu��)��的搭�?/font>

风舞�׃ؕ 2011-05-23 18:08 发表评论

jboss配置��理

风舞�׃ؕ — Mon, 16 Jun 2008 03:04:00 GMT

server配置文�g在如下�\径：
\jboss-4.2.2.GA\server\default\deploy\jboss-web.deployer
server.xml

把项目打包成war文�g�Q�直接放在\jboss-4.2.2.GA\server\default\deploy 目录下，卛_��讉K��?

风舞�׃ؕ 2008-06-16 11:04 发表评论

欧美天堂视频,亚洲每日在线,亚洲国产一区二区久久

���谈如何提高AJAX客户端响应速度

���谈如何提高AJAX客户端响应速度

jboss配置���理

��谈如何提高AJAX客户端响应速度

��谈如何提高AJAX客户端响应速度

jboss配置��理