Rendimiento  Java Script - Programador PHP
Upcoming SlideShare
Loading in...5
×
 

Rendimiento Java Script - Programador PHP

on

  • 1,084 views

Gracias a http://programadorphp.org/

Gracias a http://programadorphp.org/
Optimizar JavaScript...una explicación sencilla.

Statistics

Views

Total Views
1,084
Views on SlideShare
1,083
Embed Views
1

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rendimiento  Java Script - Programador PHP Rendimiento Java Script - Programador PHP Document Transcript

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