Mejorar la velocidad de respuesta del cliente AJAX

La aparición de AJAX ha cambiado enormemente el modo de funcionamiento de los clientes de aplicaciones web. Permite a los usuarios concentrarse en su trabajo sin tener que soportar las molestas actualizaciones de página con frecuencia. En teoría, la tecnología AJAX puede reducir en gran medida el tiempo de espera para las operaciones del usuario y ahorrar tráfico de datos en la red. Sin embargo, este no es siempre el caso. Los usuarios suelen quejarse de que se reduce la velocidad de respuesta de los sistemas que utilizan AJAX.
El autor ha estado involucrado en la investigación y el desarrollo de AJAX durante muchos años y participó en el desarrollo de Dorado, una plataforma AJAX relativamente madura en China. Según la experiencia del autor, la causa principal de este resultado no es AJAX. Muchas veces la reducción en la velocidad de respuesta del sistema se debe a un diseño de interfaz poco razonable y a hábitos de programación insuficientemente eficientes. A continuación analizaremos varios aspectos a los que se debe prestar atención durante el proceso de desarrollo de AJAX.

 Uso adecuado de la programación del cliente y llamadas a procedimientos remotos.
La programación del lado del cliente se basa principalmente en JavaScript. JavaScript es un lenguaje de programación interpretado y su eficiencia operativa es ligeramente menor que la de Java. Al mismo tiempo, JavaScript se ejecuta en un entorno estrictamente restringido como el navegador. Por lo tanto, los desarrolladores deben tener una comprensión clara de qué lógica se puede ejecutar en el lado del cliente.
La forma en que se debe utilizar la programación del lado del cliente en aplicaciones reales depende de la experiencia y el criterio del desarrollador. Muchos problemas aquí sólo pueden entenderse. Debido al espacio limitado, aquí resumimos aproximadamente las siguientes precauciones:

 Evite el uso frecuente de llamadas a procedimientos remotos tanto como sea posible; por ejemplo, evite el uso de llamadas a procedimientos remotos en cuerpos de bucle.
 Si es posible, utilice la llamada a procedimiento remoto AJAX (llamada a procedimiento remoto asíncrona).
 Evite colocar operaciones de datos pesadas en el lado del cliente. Por ejemplo: grandes lotes de operaciones de copia de datos, cálculos que requieren un gran recorrido de datos, etc.
 Mejorar el método de operación de los objetos DOM.
En la programación del lado del cliente, las operaciones en objetos DOM suelen ser las que ocupan más tiempo de CPU. Para la operación de objetos DOM, la diferencia de rendimiento entre diferentes métodos de programación suele ser muy grande.
Los siguientes son tres fragmentos de código con exactamente los mismos resultados. Su función es crear una tabla de 10x1000 en la página web. Sin embargo, sus velocidades de carrera son muy diferentes.
/* Código de prueba 1 - Tiempo necesario: 41 segundos*/
var tabla = document.createElement("TABLA");
documento.body.appendChild(tabla);
para(var i = 0; i < 1000; i++){
var fila = table.insertRow(-1);
para(var j = 0; j < 10; j++){
var celda = objRow.insertCell(-1);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* Código de prueba 2 - Tiempo necesario: 7,6 segundos*/
var tabla = document.getElementById("TABLA");
documento.body.appendChild(tabla);
var tbody = document.createElement("TBODY");
tabla.appendChild(tbody);
para(var i = 0; i < 1000; i++){
var fila = document.createElement("TR");
tbody.appendChild(fila);
para(var j = 0; j < 10; j++){
var celda = document.createElement("TD");
fila.appendChild(celda);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* Código de prueba 3 - tiempo necesario: 1,26 segundos*/
var tbody = document.createElement("TBODY");
para(var i = 0; i < 1000; i++){
var fila = document.createElement("TR");
para(var j = 0; j < 10; j++){
var celda = document.createElement("TD");
cell.innerText = "( " + i + " , " + j + " )";
fila.appendChild(celda);
}
tbody.appendChild(fila);
}
var tabla = document.getElementById("TABLA");
tabla.appendChild(tbody);
documento.body.appendChild(tabla);
La diferencia entre el "Código de prueba 1" y el "Código de prueba 2" aquí es que se utilizan diferentes métodos API al crear celdas de tabla. La diferencia entre el "Código de prueba 2" y el "Código de prueba 3" radica en el orden de procesamiento ligeramente diferente.
No podemos analizar una diferencia de rendimiento tan grande entre el "Código de prueba 1" y el "Código de prueba 2". Lo que se sabe actualmente es que insertRow e insertCell son API específicas de tablas en DHTML, y createElement y appendChild son API nativas de W3C DOM. El primero debería ser una encapsulación del segundo. Sin embargo, no podemos concluir de esto que la API nativa del DOM sea siempre mejor que la API específica de objeto. Se recomienda realizar algunas pruebas básicas sobre su rendimiento cuando necesite llamar a una API con frecuencia.
La diferencia de rendimiento entre el "Código de prueba 2" y el "Código de prueba 3" proviene principalmente de la diferencia en su orden de compilación. El enfoque del "Código de prueba 2" es crear primero el objeto