AJAX client to improve response time

2009-08-26  来源:本站原创  分类:AJAX  人气:506 

The emergence of AJAX great Web application has changed the mode of operation of the client, which allows the users to work in the whole-hearted do not have to put up with frequent page refreshes it offensive. Theoretically AJAX technology in a large extent we can reduce the waiting time for users, while saving on the network data traffic. However, the actual situation is not always the case. Users often complain about the system using the AJAX instead of reducing the response speed.
AJAX I engaged in R & D for many years, involved in the development of a more mature domestic AJAX platform-dorado. According to the author's experience, leading to the root causes of this result is not AJAX. A lot of time to reduce the speed of system response is not reasonable from the interface design and lack of efficient programming habits. Here we analyze a number of AJAX development process need to pay attention to the link at all times.

  •  Use of legitimate client programming and remote procedure call .

Clients are mainly based on the programming of JavaScript. And JavaScript is an interpreted programming language, its operating efficiency should be compared with Java, such as Ph . At the same time, JavaScript is a browser running on a strictly limited environment. So what logical for developers to implement the client should have a clear understanding.
In the practical application of how to use what should be the client program, which relies on the experience of the developer to judge. Here is a lot of problems can only be aware of. Due to limited space, where we more or less sum up a few pay attention to the following matters:

  •  frequently as possible to avoid the use of remote procedure call , for example, in the loop to avoid the use of remote procedure call.
  •  If possible way to use AJAX Remote Procedure Call (asynchronous remote procedure call).
  •  avoid placing a heavy -weight data manipulation on the client. For example: high-volume data replication operation, a large amount of data needed to complete traversal of the calculation.
  •  improve the operation of the DOM object .

Client-side programming in the operation of the DOM object is often the most easily occupy CPU time. DOM object for the operation of different programming differences between the performance is often very great.
The following are the results of three identical code, their role is to create a web page form 10x1000. However they had a different speed.
/ * Test code 1 - time: 41 seconds * /
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 + ")";
)
)

/ * Test code 2 - time: 7.6 seconds * /
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 + ")";
)
)

/ * Test code 3 - time: 1.26 seconds * /
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);
The "test code 1" and "test code 2" is the difference between the unit in the creation of forms of the API use different methods. And "test code 2" and "test code 3" is the difference between dealing with a slightly different order.
"Test Code 1" and "test code 2" between the performance of such a large difference analysis we can not, at present known is the insertRow and Vogt insertCell is some DHTML table API, createElement and appendChild is the W3C DOM's native API. While the former should be the latter package. However, we can not conclude that the DOM of the original is always better than the API unique to the target API. Suggest that you frequently need to call in a particular API, the performance of some of its basic test.
"Test code 2" and "test code 3" difference in performance between the main building from the order they are different. "Test code 2" is first of all to create the most <TABLE> outer object, and then followed by the creation of the cycle <TR> and <TD>. And "test code 3" is the first in memory to the outside from the inside of the building a good form, then add it to the final page. The aim is to reduce as much as possible to re-calculate browser the number of page layout. Whenever an object we will be added to the page, the browser will attempt to control page layout in the re-calculated. Therefore, if we can first of all to be in memory the entire structure will be the object of all the creation of good, and then a one-time added to the page. In that case, the browser will only do a re-calculation of the layout. Summarized in one sentence later it is the better implementation of appendChild. Sometimes in order to enhance operational efficiency, we can even consider the use of existing removeChild will control removed from the page, and then later re-structure its place among the back pages.
 additive to improve the speed of the string in the use of AJAX to submit information , I may often need to assemble relatively large number of string through the submission of XmlHttp to complete POST. Despite the submission of such information does not seem elegant approach, but sometimes we may have to face such a demand. JavaScript then accumulate on the speed of string be? Let's do this the following experiment. A cumulative length of the string 30000.
/ * Test code 1 - time: 14.325 seconds * /
var str = "";
for (var i = 0; i <50000; i + +) (
str + = "xxxxxx";
)
14.325 seconds during time-consuming code, the result was unsatisfactory. Now we will form with the following code:
/ * Test code 2 - time: 0.359 seconds * /
var str = "";
for (var i = 0; i <100; i + +) (
var sub = "";
for (var j = 0; j <500; j + +) (
sub + = "xxxxxx";
)
str + = sub;
)
This time-consuming code 0.359 seconds! The same result, we have to do is first of all, some of the smaller string assembly and then assembled into larger strings. This approach can be assembled in a string of late to reduce the amount of data memory copy. Know that after the principle of the above, we can further break up the code after testing. The following code is only 0.140 seconds and time-consuming.
/ * Test code 3 - time: 0.140 seconds * /
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;
)
However, this approach may not be above the best! If we need the information submitted is XML format (in fact the vast majority of cases, we can try to submit the information to be assembled into XML format), we can find a more elegant and more efficient approach - the use of DOM objects assembled for our character string. Bought this on behalf of the assembly following a string length of 950,015 time-consuming just to be 0.890 seconds.
/ * Assembly information on the use of DOM objects - time: 0.890 seconds * /
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 object to avoid memory leaks .
On DOM objects in IE memory leak is an often overlooked issue of developers. However, its consequences are very serious! It will lead to IE's memory usage continues to rise, and overall browser speed has declined markedly. For some more serious leakage of the page, or even as long as the set several times, doubling the speed will be reduced.
The more common model of memory leak of "circular reference model", "closure function model" and "DOM insertion sequence model", for the first two leakage model, we can page through the destructor invoked when the lifting of the way Avoid . As for the "DOM insertion sequence model" is needed to change some of the usual programming practice to avoid.
The model of the memory leak can be introduced more quickly available through Google, not too much of this article. However, I recommend a website for search and analysis tools for memory leak small - Drip, a newer version of the current is 0.5, download address is http://outofhanwell.com/ieleak/index.php
 complex sub -page loading and initialization of the system, <br /> a more complex and some inconvenience to use the IFrame interface, we can be implemented in phases to its load. For example, multi-page interface labels, we can first of all pages to download and initialization of the default tab page, and then use AJAH (asynchronous JavaScript and HTML) technologies to other asynchronous loading of content tab. This will ensure that the interface can be the first time in the first show to the user. The complexity of the whole loading process of the interface to the user's operation of decentralized process.
 use GZIP compression network traffic .
In addition to the above-mentioned improvements in the code level, we can also use GZIP to reduce network traffic effectively. At present, the mainstream of common browsers support the GZIP algorithm have all, we often need to write only a small amount of code to support the GZIP. For example, in J2EE, we can Filter through the following code to determine whether the client browser to support the GZIP algorithm, and then as needed to achieve java.util.zip.GZIPOutputStream use GZIP output.
/ * Determine browser support for GZIP mode code * /
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;
)
In general, GZIP for HTML, JSP's compression ratio can reach 80%, and it caused the server and client performance loss is almost negligible. In combination with other factors, support GZIP site has the potential to save us 50% of network traffic. GZIP can therefore use the network environment for those who are not particularly good result in significant application performance. Http monitor the use of the Fiddler tool can be easily detected in the page before and after the use of GZIP data communications. Fiddler's download address is http://www.fiddlertool.com / fiddler /
On optimizing the performance of Web applications, it is a very big topic. In this paper, owing to space limitations, only a few of the details involved, and these details can not be the optimal way for everyone to show comprehensive. In this paper, we expect to draw, especially for Web application performance optimization client's full attention. Server-side programming skills, after all, has been well-known for many years, in service performance of the potential client has been digging a little. And the client is often the way to improve access to the amazing performance.

相关文章
  • AJAX client to improve response time 2009-08-26

    The emergence of AJAX great Web application has changed the mode of operation of the client, which allows the users to work in the whole-hearted do not have to put up with frequent page refreshes it offensive. Theoretically AJAX technology in a large

  • Principle and Application of Three Ajax (send request and response dealing with the general steps) 2009-08-26

    First, create the XMLHttpRequest object, we can then, through its properties and methods of sending and processing of HTTP request, send the request and response dealing with the general steps are as follows: 1, call open () method set the request of

  • NFS client to improve the operational performance of large file write 2010-03-31

    To install the NFS file system to write large files may cause the order to the NFS server's file transfer rate dropped significantly. In this case, you have to determine whether this case follow the steps to solve the problem. Suppose the system is r

  • Ajax to read the response first 2010-04-29

    If the authentication server is running, just want to read the server response sent first, you can use the HEAD request. HEAD requests can get through the following: Content-Type (content type) Content-Length (content-length) Last-Modified (the last

  • Login to write up - the evolution of the commercial software 2010-12-03

    Register, login, appears to be very simple function, once the number of entry-level software books are based on the level of the program as a Hello world to explain, but there are a few people can really figure out this seemingly simple procedure, fr

  • Written Home - transformed to commercial software 2010-12-03

    Registration, login, appears to be very simple function, once the number of entry-level software books are based on the level of the program as a Hello world to explain, but there are a few people can really figure out this seemingly simple procedure

  • ajax entry Xiang Jie (2) 2010-04-03

    Open Request With the URL to connect to can be configured after the request. XMLHttpRequest object can be open () method to complete. The method has five parameters: · Request-type: the type of send request. Typical values are GET or POST, but can al

  • Ajax Integration and Support in the ArcGIS Java We 2009-04-03

    http://edndoc.esri.com/arcobjects/9.2/Java/java/server/web_adf/ajax/ajax_integration.html Introduction ArcGIS Server at 9.2 is a complete Web-based GIS developer platform for building server applications that can be consumed by a variety of clients.

  • At ajax application data exchanged between 2009-04-20

    In this article, I will introduce one for the Ajax client and server to transfer data between the main method, and compare the traditional model of Web applications with the Ajax model differences. In addition, the text will also be explored at the s

  • Flv to try: demonstration ajax implementation puff at RJS in effect 2009-05-05

    Troublesome really ah, finally get Some RJS message Introduction What are RJS? What are RJS? Ajax allows users with the interaction between the browser experience is more like desktop programs. Since Ajax allows the browser to initiate a remote call

  • Flv to try: demonstration ajax implementation of puff at the effect of RJS 2009-05-13

    It's really annoying, ah, finally get Some message RJS Introduction What is RJS? What is RJS? Ajax allows the user and the interaction between the browser experience is more like desktop programs. Since Ajax allows the browser to launch long-distance

  • About synchronous and asynchronous AJAX study 2009-05-18

    Recently in the development process on some logic to determine the needs, for example, sometimes to the server through AJAX interaction, then such response data to determine the relationship between the logic of the next step. But how the contents of

  • Virtual discussion: RIA and Ajax technology, the status quo and prospect of 2009-09-26

    Recently, InfoQ through Email for RIA and Ajax technology, the status and outlook set up a virtual team. The group brought together a number of outstanding contributions to the community has the technical elite, they are: Mozilla development tools co

  • Ajax: Java Object Serialization 2009-11-12

    In this paper, we discuss the basics of Ajax development, but will focus on a number of Java Web developers are most concerned about the issue: In order to generate data on the client. Most Java developers have the Model - View - Controller (MVC) mod

  • Principle of detailed description of Ajax 2009-07-10

    Ajax from the HTML, JavaScript? Technology, DHTML, and DOM composition, this method can be distinguished clumsy Web interface, into interactive Ajax applications. This series was written by an Ajax expert, demonstrates how these technologies work tog

  • AJAX request status return status list 2010-06-24

    AJAX request status return status list of the five state 2010-03-04 18:24 readyState readyState of the five states for a description or definition, a lot of Ajax Books (English original), the majority did not elaborate in the "Pragmatic Ajax A Web 2.

  • Master Ajax, Part 1: Ajax Introduction Introduction 2010-07-16

    Five years ago, if you do not know XML, you are the one no one seriously ugly duckling. 10 months ago, Ruby has become the center of attention, do not know a Ruby programmer can only bench. Today, if want the latest technology fashion, that your goal

  • AJAX Learning Summary 2010-10-17

    A, AJAX concept AJAX is a local interface updated. In short, the B / S format to the user C / S interface look and feel. The English name is AJAX Asynchronous JavaScript and XML, (Asynchronous JavaScript and XML technology). Under a little explanatio

  • On Mobile Ajax and the Frost Ajax Library 2010-11-19

    Mobile Ajax and the Frost Ajax Library OF Rocco Georgi · 2007 12 5 may This translation from the Mobile Ajax And The Frost Ajax Library Description This article describes how to create mobile websites using Ajax. The following will discuss the mobile

  • Getting Started with Ajax and the basis of (a) 2010-12-11

    First, elaborate the principles of the Ajax from C / S and B / S talk about the principle. The birth of Windows operating system for stand-alone communications offers great support, program design from the early DOS single-user single task distribute