tip 13 – Reducir la cantidad de Ajax Request

tip : utilizar alguna técnica de “Multi Part Ajax Request”

Como ya sabemos, las webapp o website desarrollados con la técnica de ajax tienen muchísimas ventajas en performance y usabilidad sobre las webapps hechas con la clásica arquitectura  request-response.  Pero también es sabido que el costo de cada Request del navegador suele ser el mas caro a la hora de evaluar un loading. Por ende minimizar los request redunda en ventajas de performance.

Mirando en detalle cualquier webapp que tenga un alto porcentaje de ajax (request bajo XHR o XMLHTTPRequest), entendemos que cada acción realizada en la pagina desencadena una gran cantidad XHR request al server.  Por ejemplo: Agregar un dato en el formulario en un clásico List-Detail, generaría al menos 2 request en un diseño clásico. Uno para insertar los datos y otro para obtener el nuevo List.  En mi experiencia en webapps, la mayoría de las acciones desencadenan entre 3 a 4 request. Y observando Gmail, como una clásica webapp en ajax, podemos ver que son mas de 10 los request que generan cada simple acción como enviar un mail.

Al analizar el tiempo que tiene cada request de ajax, donde generalmente la cantidad de datos transmitidos son menores a 1 o 2k, vemos que el 90% del mismo esta en establecer la conexión con el servidor. Con este dato podemos ver facilmente el problema:

Estamos desperdiciando mucho tiempo en establecer las conexiones de multiples XHR Request.

La solución parece evidente, aunque no es algo altamente popular:

Debemos reducir la cantidad de XHR Request, unificando varios request dentro de uno.

De ese modo podemos enviar varios datos y recibir varios datos en un solo request.  Obviamente que empaquetar y desempaquetar varios request tiene un costo. Lo mejor sera encontrar la relación justa entre la cantidad de request y el costo de empaquetado. Y esto varia según el algoritmo que se use.

Recientemente Micah Snyder de Digg Technology ha publicado un post sobre DUI.Stream, que es una librería Javascript que justamente empaqueta varias request de manera transparente. Es el primer trabajo serio que se ve en este sentido. Y podemos observar la gran diferencia performance en esta demo.

Suerte