The emergence of AJAX greatly changed the Web application client mode of operation, which allows 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 on user operations can reduce the waiting time, while saving on the network data traffic. The likelihood, the actual situation is not always the case. Users often complain that using the AJAX response speed of the system rather than reduced.
AJAX writer engaged in R & D for many years, involved in the development of the current more mature 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 are not enough rational and efficient interface design and not enough programming habits. Here we analyze the process of developing some AJAX moment required attention to the aspect.
reasonable use of client-side programming and remote procedure call.
Client-side programming are mainly based on the JavaScript. And JavaScript is an interpreted programming language, its operating efficiency in relation to Java and so should稍逊一筹. At the same time, JavaScript is running in the browser such a strictly constrained environment. Therefore developers on what logic can the implementation of the client should have a sober understanding of this.
In the actual application of what should be how to use client-side programming, which relies on the experience of developers judgments. Here are a lot of questions can only be aware of. Because of space limitations, here we are more or less summed up some attention to the following matters:
frequently as possible to avoid the use of remote procedure call, such as in the loop to avoid the use of remote procedure call.
If possible way to use AJAX Remote Procedure Call (Asynchronous mode of remote procedure call).
avoid placing a heavy-weight data manipulation at the client. For example: large quantities of data replication operation, required a large amount of data traversing through the completion of the calculation.
DOM object to improve the mode of operation.
Client-side programming, the DOM object of the operation is often the most easily occupy CPU time. DOM object for the operation, between different programming methods are often differences in performance are very great.
The following three paragraphs are identical to the results of the code, their role is to create a page at the table 10x1000. However, their speed has a big difference.
/ * Test code 1 - time-consuming: 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);
Here the "test code 1" and "test code 2" is the difference between the table in the creation of modules using a different API methods. And "test code 2" and "test code 3" is the difference between the treatment of a slightly different order.
"Test code 1" and "test code 2" between the performance of such a big difference between us is not able to analyze, at present known are insertRow and DHTML are insertCell table Zweigert some API, createElement and appendChild are W3C DOM's native API. While the former should be the latter package. However, we can not conclude that the DOM of the native API is always better than the target-specific API. U.S. proposals at a certain API calls required frequent when its performance to do some basic tests.
"Test code 2" and "test code 3," the main difference between the performance of their building from a different sequence. "Test code 2" approach is first to create the most outer <TABLE> object, and then in turn create a cycle at <TR> and <TD>. And "test code 3" approach is the first in memory to the outside from the inside the entire building a better table, and then add it to the final page. The purpose of this is as much as possible to reduce the browser to re-calculate the number of page layout. Whenever an object we will be added to the page, the browser will attempt to control page layout recalculation. So, if we can first of all will be in memory to construct the whole object of all to create better, and then a one-time added to the web pages. In that case, the browser will only make a re-calculation of the layout. Summarized in one sentence that is later, the better the implementation of appendChild. Sometimes, in order to improve operating efficiency, we may even consider using the removeChild controls exist will have to remove from the page, and then re-constructed after the finish back to its place among the pages.
improve the speed of the string cumulative
In the use of AJAX to submit information, I probably assembled usually required relatively large number of strings to achieve through xmlhttp POST submit. Even though such information submitted by the practice does not look elegant, but sometimes we may have to face such a demand. Then the JavaScript on the cumulative speed of the string be? We first do the following this 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 be the form of code to read as follows:
/ * 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 assembled some of the smaller string and then assembled into larger strings. This approach can be effective at the later stage of assembly string copy to reduce the amount of data memory. Know that after this principle we can also put the above code to break up after further testing. The following code only time-consuming 0.140 seconds.
/ * 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, above this practice may be not the best! If we are required to submit the information in 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 efficient method is more elegant - using DOM object for the assembly of our characters string. Bought this on behalf of the following assembly of a length of 950,015 time-consuming and have to string only 0.890 seconds.
/ * Use DOM object assembly information - 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 leak.
About DOM objects in IE memory leak is an often overlooked problem developers. However, it is the consequences are very serious! It will cause IE's memory usage continues to rise, and the overall browser speed has declined markedly. For some more serious leakage of the page, or even as long as the refresh several times, doubling the operating speed will be lowered.
The more common model of memory leaks have "circular reference model", "closure function model" and "DOM insertion sequence model", for the first two leakage models are available through our website at destructor invoked when the lifting of the way避免. As for the "DOM insertion order model" is required by changing the number of usual programming practice to avoid.
Memory leaks related to the model of introduction can be more quickly found through Google, this article not elaborate too much. However, I recommend to you a page for search and analysis tools for memory leak small-Drip, current newer version is 0.5, download address is http://outofhanwell.com/ieleak/index.php
complex sub-page loading and initialization
Among some of the system is actually relatively complicated and inconvenient to use IFrame interface, we can be implemented in phases to its load. Labels such as for multi-page interface, we can first download and initialization of multi-page tag of the default page, and then use AJAH (asynchronous JavaScript and HTML) technologies for asynchronous loading of other tag page content. This will ensure that the interface can be the first time at the first show to the user. The whole complexity of the loading process of the interface to the user's operation of decentralized process.
use GZIP compression network traffic.
In addition to the above-mentioned improvement of the code class, we can also use GZIP to reduce network traffic effectively. At present, the mainstream of common browsers have all supported the GZIP algorithm, we often only a small amount of code required to prepare to support the GZIP. For example, in J2EE, we can at Filter through the following code to determine whether the client browser to support the GZIP algorithm, then according to the use of java.util.zip.GZIPOutputStream required to achieve GZIP output.
/ * Determine the browser support for GZIP way 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;
)
Generally speaking, GZIP for HTML, JSP compression ratio can reach 80%, which caused client and client service performance loss is almost negligible. In combination with other factors, support GZIP site has probably saved 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 surveillance using Fiddler could be a convenient instrument to detect the page before and after the use of GZIP data communications. Fiddler's download address is http://www.fiddlertool.com/fiddler/
About Web application performance optimization, it is a very big topic. This paper because of space limitations, only one of several details involved, and these details can not be the optimal way to the U.S. to show comprehensive. Expectations of this article can give rise to the U.S. in particular, Web applications are client-side performance optimization of full attention. Service client programming skills, after all, has been known for many years for the U.S. in services, mining properties of the potential client has not been. In Ways to improve the client can often be surprising performance.
AJAX writer engaged in R & D for many years, involved in the development of the current more mature 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 are not enough rational and efficient interface design and not enough programming habits. Here we analyze the process of developing some AJAX moment required attention to the aspect.
reasonable use of client-side programming and remote procedure call.
Client-side programming are mainly based on the JavaScript. And JavaScript is an interpreted programming language, its operating efficiency in relation to Java and so should稍逊一筹. At the same time, JavaScript is running in the browser such a strictly constrained environment. Therefore developers on what logic can the implementation of the client should have a sober understanding of this.
In the actual application of what should be how to use client-side programming, which relies on the experience of developers judgments. Here are a lot of questions can only be aware of. Because of space limitations, here we are more or less summed up some attention to the following matters:
frequently as possible to avoid the use of remote procedure call, such as in the loop to avoid the use of remote procedure call.
If possible way to use AJAX Remote Procedure Call (Asynchronous mode of remote procedure call).
avoid placing a heavy-weight data manipulation at the client. For example: large quantities of data replication operation, required a large amount of data traversing through the completion of the calculation.
DOM object to improve the mode of operation.
Client-side programming, the DOM object of the operation is often the most easily occupy CPU time. DOM object for the operation, between different programming methods are often differences in performance are very great.
The following three paragraphs are identical to the results of the code, their role is to create a page at the table 10x1000. However, their speed has a big difference.
/ * Test code 1 - time-consuming: 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);
Here the "test code 1" and "test code 2" is the difference between the table in the creation of modules using a different API methods. And "test code 2" and "test code 3" is the difference between the treatment of a slightly different order.
"Test code 1" and "test code 2" between the performance of such a big difference between us is not able to analyze, at present known are insertRow and DHTML are insertCell table Zweigert some API, createElement and appendChild are W3C DOM's native API. While the former should be the latter package. However, we can not conclude that the DOM of the native API is always better than the target-specific API. U.S. proposals at a certain API calls required frequent when its performance to do some basic tests.
"Test code 2" and "test code 3," the main difference between the performance of their building from a different sequence. "Test code 2" approach is first to create the most outer <TABLE> object, and then in turn create a cycle at <TR> and <TD>. And "test code 3" approach is the first in memory to the outside from the inside the entire building a better table, and then add it to the final page. The purpose of this is as much as possible to reduce the browser to re-calculate the number of page layout. Whenever an object we will be added to the page, the browser will attempt to control page layout recalculation. So, if we can first of all will be in memory to construct the whole object of all to create better, and then a one-time added to the web pages. In that case, the browser will only make a re-calculation of the layout. Summarized in one sentence that is later, the better the implementation of appendChild. Sometimes, in order to improve operating efficiency, we may even consider using the removeChild controls exist will have to remove from the page, and then re-constructed after the finish back to its place among the pages.
improve the speed of the string cumulative
In the use of AJAX to submit information, I probably assembled usually required relatively large number of strings to achieve through xmlhttp POST submit. Even though such information submitted by the practice does not look elegant, but sometimes we may have to face such a demand. Then the JavaScript on the cumulative speed of the string be? We first do the following this 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 be the form of code to read as follows:
/ * 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 assembled some of the smaller string and then assembled into larger strings. This approach can be effective at the later stage of assembly string copy to reduce the amount of data memory. Know that after this principle we can also put the above code to break up after further testing. The following code only time-consuming 0.140 seconds.
/ * 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, above this practice may be not the best! If we are required to submit the information in 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 efficient method is more elegant - using DOM object for the assembly of our characters string. Bought this on behalf of the following assembly of a length of 950,015 time-consuming and have to string only 0.890 seconds.
/ * Use DOM object assembly information - 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 leak.
About DOM objects in IE memory leak is an often overlooked problem developers. However, it is the consequences are very serious! It will cause IE's memory usage continues to rise, and the overall browser speed has declined markedly. For some more serious leakage of the page, or even as long as the refresh several times, doubling the operating speed will be lowered.
The more common model of memory leaks have "circular reference model", "closure function model" and "DOM insertion sequence model", for the first two leakage models are available through our website at destructor invoked when the lifting of the way避免. As for the "DOM insertion order model" is required by changing the number of usual programming practice to avoid.
Memory leaks related to the model of introduction can be more quickly found through Google, this article not elaborate too much. However, I recommend to you a page for search and analysis tools for memory leak small-Drip, current newer version is 0.5, download address is http://outofhanwell.com/ieleak/index.php
complex sub-page loading and initialization
Among some of the system is actually relatively complicated and inconvenient to use IFrame interface, we can be implemented in phases to its load. Labels such as for multi-page interface, we can first download and initialization of multi-page tag of the default page, and then use AJAH (asynchronous JavaScript and HTML) technologies for asynchronous loading of other tag page content. This will ensure that the interface can be the first time at the first show to the user. The whole complexity of the loading process of the interface to the user's operation of decentralized process.
use GZIP compression network traffic.
In addition to the above-mentioned improvement of the code class, we can also use GZIP to reduce network traffic effectively. At present, the mainstream of common browsers have all supported the GZIP algorithm, we often only a small amount of code required to prepare to support the GZIP. For example, in J2EE, we can at Filter through the following code to determine whether the client browser to support the GZIP algorithm, then according to the use of java.util.zip.GZIPOutputStream required to achieve GZIP output.
/ * Determine the browser support for GZIP way 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;
)
Generally speaking, GZIP for HTML, JSP compression ratio can reach 80%, which caused client and client service performance loss is almost negligible. In combination with other factors, support GZIP site has probably saved 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 surveillance using Fiddler could be a convenient instrument to detect the page before and after the use of GZIP data communications. Fiddler's download address is http://www.fiddlertool.com/fiddler/
About Web application performance optimization, it is a very big topic. This paper because of space limitations, only one of several details involved, and these details can not be the optimal way to the U.S. to show comprehensive. Expectations of this article can give rise to the U.S. in particular, Web applications are client-side performance optimization of full attention. Service client programming skills, after all, has been known for many years for the U.S. in services, mining properties of the potential client has not been. In Ways to improve the client can often be surprising performance.