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:

Modelos Rendimiento
(Objetos) (Navegador)
XMLHttpRequest

Contadores (Timers)

Navegador Renderizado

DOM

CSS

Análisis
Sintáctico

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 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…