Aplicaciones web & JavaScript Una aproximación a la realidad del rendimiento de las aplicaciones web que usan JavaScript.

Marzo - 2008 Blog.zenphp.es | https://forja.rediris.es/projects/csl2-zenphp/ Juan Belón

Un tema que crea mucha confusión es la diferenciación entre dónde se ejecuta JavaScript y donde se

toman los puntos de medida de rendimiento. La dificultad tiene que ver con el hecho de que muchos

aspectos de un navegador son directamente proporcionales a otros, lo que causa que las cuestiones de

eficiencia sean intervenidas constantemente, un esquema que ayuda a comprenderlo es el siguiente:

Explicando las diferentes áreas una a una:

JavaScript – Representa el núcleo del motor JavaScript. Este contiene sólo las primitivas básicas (funciones, objetos, vectores, expresiones regulares, etc.) para realizar operaciones. En si mismo no es muy útil, al menos no tanto como un framework javascript. Las mejoras de rendimiento dependen de la habilidad de cómo va afectar a todo el resto de objetos del dominio.

Modelos(Objetos)

XMLHttpRequest

Contadores (Timers)

Navegador

DOM

CSS

Rendimiento(Navegador)

Renderizado

Análisis

Sintáctico

Modelos Objeto – En conjunto estos son los objetos introducidos en tiempo de ejecución en JavaScript para dar al usuario un mayor abanico de posibilidades. Generalmente están implementados en C++ y son importados en el entorno de JavaScript (por ejemplo XPCOM es usado frecuentemente por Mozilla). Hay muchas comprobaciones de seguridad para prevenir a los scripts maliciosos acceder a estos objetos de forma involuntaria(lo que disminuye el rendimiento). Las mejoras de velocidad generalmente vienen en la forma de mejoras en lacapa de conexión o incluso eliminando dicha capa...(reemplazo).

o XMLHttpRequest y contadores (temporizadores o timers) – Se implementan en C++ y se cargan en tiempo de ejecución en JavaScript. El rendimiento de estos elementos solo afectan indirectamente al rendimiento del dibujado en pantalla (renderizado).

o Navegador – Representa objetos como 'window', 'window.location', etc. Las mejoras aquí también afectan al redimiento del renderizado.

o DOM y CSS – Estas son representaciones de objetos de un sitio, HTML y CSS. Cuando se crea una aplicación web todo tiene que pasar a través de estas representaciones, sus mejoras de rendimiento,en el caso del DOM afectan en cómo de rápido se dibujan los cambios y como se propagan.

Análisis Sintáctico – Este es el proceso de lectura, análisis y conversión del HTML,CSS,XML, etc. en sus modelos de objeto nativos. Las mejoras de velocidad pueden afectar los tiempos de carga de una página.

Renderizado – Es la fase final, el dibujado de la página o cualquier subsecuencia de actualización. Es el cuello de botella final para el rendimiento de las aplicaciones interactivas.

Lo interesante de todo esto es que se pone mucha atención al rendimiento de una sóla capa del navegador: JavaScript, sin embargo la situación real es más complicada.Para los principiantes, mejorar el rendimiento de JavaScript tiene el potencial de mejorar mucho el rendimiento de un sitio web, pero aún quedan cuellos de botella en el DOM, CSS, y las capas de renderizado. Si tenemos una representación DOM lenta, entonces nos sirve de poco tener un JavaScript muy eficiente, ya que tenemos que tener en cuenta que es el navegador el que tiene que procesar toda la pila del navegador.

Estos son algunos consejos para que realicemos aplicaciones eficientes en equilibrio en cada capa:

El rendimiento de JavaScript ejecutado fuera del navegador (en una consola,o como el proyecto xpages) es muchísimo más rápido que dentro del navegador. La sobrecarga de modelos objeto y sus comprobaciones de seguridad asociadas son suficientes para notar la diferencia ;)

Un código de “test” (prueba) mal escrito en JavaScript puede verse afectado por un cambio en el engine de dibujado. Si la prueba analiza el tiempo total de ejecución ,un grado accidental de sobrecarga en el motor de render puede introducir cambios inesperados, por lo que debemos sacar este factor y tenerlo en cuenta.

Hay que mejorar el procesamiento de la cola de tareas de rendimiento del navegador ;)

Un ejemplo de sobrecarga JavaScript es www.senseidav.com, puede comprobarse que la

entrada al sitio es lenta, al principio lo diseñé de forma que pudiera separar cada parte

cargada e ir mostrando y pre-procesando cada división de la capa de renderizado para

agilizar el cuello de botella, pero al ir avanzando la aplicación dichas divisiones se hicieron

dependientes unas de otras con lo que no es posible cargarlas por separado por lo que

mientras se cargan en segundo plano, en primer plano se muestra una capa de

presentación con una animación de precarga de AJAX y al obtenerse todas las demás, se

van mostrando; primero añadí animaciones para dicha tarea,…pero el rendimiento era

muy bajo para algunos tipos de animaciones y como no me convencia el resultado decidí

eliminar dichas animaciones de presentación, para dejar la web como está ahora…aún asi,

parece que el usuario, por norma general no suele esperar más de 2 minutos la carga de

la web, teniendo en cuenta que su conexión es ADSL y no está muy colapsada (¿uso de

programas de redes p2p y otros?) por lo que generalmente tiene unas 20 visitas al día de

las cuales un 85% son nuevas y permancen no más de 5 minutos en la misma página

aunque no he logrado comprobar si es por cambiar de página o al realizar una llamada

AJAX el detector de presencia de google analytics no llega a funcionar…