Analysis of AJAX client response speed

Theoretically, Ajax technology can reduce the waiting time of the user's operation and save the data traffic on the network to a great extent. However, the reality is not always the case. Users often complain that the AJAX system responds less quickly.
The root cause of this result is not Ajax, and many times the reduction in system response is caused by a lack of reasonable interface design and less efficient programming habits. Let's look at some of the aspects of Ajax development that need to be noticed all the time.
Reasonable use of client-side programming and remote procedure calls
The client's programming is primarily JavaScript based. While JavaScript is an interpreted programming language, its efficiency is lesser relative to Java. JavaScript is also running in a strictly restricted environment such as a browser. So developers should have a clear understanding of what logic can be executed on the client side.
How to use client-side programming in practical applications depends on the experience of the developer. Many of the problems here are sensed. Due to the limited space, here we have summed up the following several points of attention:
Avoid using remote procedure calls as frequently as possible, such as avoiding the use of remote procedure calls in the loop body.
If possible, use AJAX-style remote procedure calls (asynchronous, remote procedure calls) whenever possible.
Avoid placing heavyweight data operations on the client. For example: large-scale data replication operations, the need for a large number of data traversal completed calculations.
Improve the way you manipulate DOM objects.
In client programming, the manipulation of Dom objects is often the easiest to consume CPU time. For the operation of Dom objects, the performance differences between different programming methods are often very large.
The following are the exact same code for the three-part run, which is to create a 10x1000 table in the Web page. But they run at a different speed.

/* 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 < J + +) {
var cell = Objrow.insertcell (-1);
Cell.innertext = "(" + i + "," + j + ")";
}
}
/* Test Code 2-time consuming: 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 < J + +) {
var cell = document.createelement ("TD");
Row.appendchild (cell);
Cell.innertext = "(" + i + "," + j + ")";
}
}
/* Test Code 3-time consuming: 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 < 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 difference between "test code 1" and "Test Code 2" Here is that different API methods are used when creating table cells. The difference between "test code 2" and "Test Code 3" is a slightly different processing order.