Next-Gen YSlow impulsado por YUI »Yahoo! interfaz de usuario de blog (YUIBlog)

Next-Gen YSlow impulsado por YUI

18 de julio 2011 a las 9:17 pm por Marcel Duran | En el desarrollo , rendimiento | 4 Comentarios

Un par de semanas, Yahoo anunció YSlow para móviles en 2011 la velocidad , con lo que el poder de análisis de rendimiento YSlow para el mundo móvil.

YSlow para móvil funciona como un marcador , por lo que es posible ejecutar en otros navegadores de Firefox (como un add-on) o Chrome (como una extensión) .

La arquitectura de YSlow fue rediseñado parcialmente al trabajo de plataforma cruzada y YUI fue el factor esencial de hacer caja de arena, cross-browser abstracción y un acceso sencillo posible YQL.

Caja de arena

Con el fin de ser incorporado en una página sin interferir con el análisis de rendimiento y sin jugar con la propia página, YSlow es un bookmarklet que inyecta JavaScript y CSS en cualquier página mediante el aprovechamiento de la potencia de YUI caja de arena:

Bookmarklet URL:

 javascript: (function (y, p, o) {
     p = y.body.appendChild (y.createElement ('iframe'));
     p.id = 'YSlow-marcador ";
     'display: none' p.style.cssText =;
     o = p.contentWindow.document;
     o.open (). write ('
         <head>
         <= Onload cuerpo "
             YUI_config = {
                 ganar: window.parent,
                 doc: window.parent.document
             };
             var d = documento;
             d.getElementsByTagName (\ "cabeza \") [0]
                 . AppendChild (
                     d.createElement (\ "script \")
                 ). Src = \ "http://d.yimg.com/jc/yslow-bookmarklet.js \ '"
         >
     ');
     o.close ()
 } (Documento))

El código anterior:

crea un vacío iframe;
anexa al cuerpo de la página;
* oculta el iframe;
obtiene su manejador de ventanas;
escribe en su contenido el cuerpo de la iframe;
este cuerpo está vacío, pero tiene un onload evento
el onload de eventos define cómo inyectar YSlow JS:
- establece YUI_config , por lo que win y doc apunta a la página que está siendo analizada window y document , respectivamente,
- dinámica inyecta URL YSlow mediante la creación de un script en el elemento iframe head

* El iframe se muestra por el momento todos los activos de la presentación YSlow se cargan

Esto colocará un iframe en la página que se analiza. Este iframe actuará como un entorno de recinto de seguridad y YSlow se encuentran dentro de ella. Dado que el iframe se crea dinámicamente sin la src atributo, tendrá acceso a su casa matriz (la página se está analizando), porque no hay la misma política de origen violación sucediendo allí.

El YUI_config objeto es útil porque establece win y doc al padre del iframe (la página se está analizando), por lo que cualquier nueva instancia de YUI será atado en el documento principal por defecto, el cableado de cualquier llamada a Y.all y Y.one a través de Y.config.win o Y.config.doc del YUI use de devolución de llamada.

Presentación YSlow es manejado por el iframe window y document referencia, lo que permite la escritura principal YSlow para hacer el marcado, así como buscar la CSS externa dentro de este iframe sin entrar en conflicto con los estilos de la página de los padres. YSlow analiza la página principal con el fin de obtener todos los componentes (imágenes, scripts, enlaces, imágenes de fondo, flash, etc) necesarios para el análisis del rendimiento posterior. Esto se hace para acceder Y.config.win y Y.config.doc , ya que se refieren a la página principal.

Cross-browser abstracción

Ser un bookmarklet, YSlow para móviles se supone que funciona en cualquier navegador *. YUI resúmenes cross-browser problemas por la normalización de las diferencias navegador, lo que resulta en un lugar limpio, fácil de leer y de mantener código base.

YSlow no se adaptó plenamente a YUI 3 - sólo la capa del controlador (a partir del componente de la aplicación que viene), por ahora - pero aún así, todo tipo de manipulación y manejo de eventos DOM son hechas por el node y el event los módulos. En futuras versiones se planea el puerto más características YSlow para YUI 3.

* No todos los navegadores son compatibles actualmente

YQL

YSlow analiza las páginas por el control de la cabeceras HTTP de los componentes encontrados en la página. Encabezados de respuesta HTTP no están disponibles en la página, por lo tanto, los componentes deben ser solicitados de nuevo para YSlow obtener la información del encabezado de respuesta. Esto podría lograrse mediante la solicitud de la lista de URLs de componentes a través de XMLHttpRequest (AJAX), pero lamentablemente debido a la restricción misma política de origen , esto no es posible a menos que todos los componentes están en el mismo dominio que la página que es muy poco probable.

Una solución común para la misma restricción política de origen es el uso JSONP, donde un servidor externo funciona como un proxy para pedirles una lista de direcciones URL de los componentes y la recuperación de sus cabeceras de respuesta HTTP en nombre de YSlow. Debido a la popularidad YSlow y los recientes esfuerzos de análisis de rendimiento móvil, estamos esperando un tráfico muy pesado para el YSlow para bookmarklet Mobile. A fin de apoyar dicho tráfico, YQL fue la solución adoptada por YSlow escalable a través de una mesa abierta de datos llamado data.headers , que recupera las cabeceras de respuesta y el contenido de una determinada lista de URLs, mientras que haciéndose pasar por el agente de usuario para asegurar el contenido que se espera es recuperados.

La consulta YQL componente hace todo el trabajo de la gestión de consultas, mientras que la gestión de solicitudes YQL JSONP bajo el capó, por lo que el código del controlador YSlow mucho más simple y fácil de mantener.

Mejoras en el futuro: YSlow Nueva interfaz amigable para el móvil

Actualmente, el YSlow de la experiencia del usuario móvil es la misma que la experiencia de escritorio. Hacer frente a una larga lista de análisis de datos de rendimiento no es la mejor experiencia en pequeñas pantallas de los teléfonos inteligentes. Desde YUI también resúmenes cruzada de los dispositivos de gestos , YSlow para móviles tendrá un nuevo móvil de fácil manejo en futuras versiones.

El rendimiento de la herramienta de rendimiento

YSlow para el despliegue de móviles se hizo con cuidado teniendo en cuenta su impacto en el rendimiento en el tiempo de carga de la página que se analiza. El YUI tres módulos que se utilizan en YSlow se analizaron para incluir sólo los módulos necesarios para cargar YSlow lo más rápido posible. El archivo semilla YUI y el cargador no se incluyeron ya que todos los módulos necesarios y submódulos se combinaron con el siguiente rendimiento Zen Ryan Grove, consejos, lo que hizo posible cargar todo junto en una sola pequeña petición individual: YSlow-bookmarklet.js: 204KB, 66KB ( gzip), donde:

YUI: 75KB, 27KB (gzip)
YSlow: 129KB, 39KB (gzip)

Más información acerca de YSlow

Manténgase al día con los últimos anuncios de YSlow por:

Visitar la página de YSlow rediseñado getyslow.com
YSlow gusto en Facebook: facebook.com / getyslow
Después de YSlow en Twitter: twitter.com / getyslow

Sobre el autor: Marcel Duran es el principal cliente para equipo de Yahoo! 's de rendimiento excepcional. Ha sido en la optimización del rendimiento de Web en los sitios de alto tráfico en la página principal de Yahoo! frontal y equipos de búsqueda, donde solicitó e investigado las prácticas de mejor rendimiento web crear páginas más rápido. Él ahora se dedica a YSlow y performance distintas herramientas de desarrollo, investigaciones y la evangelización. Su objetivo es hacer que la web, incluso más rápido de lo que puede y cree que no hay tal cosa como "sólo unos pocos milisegundos no le hará daño".

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!

4 Comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Que sin duda podría utilizar una hoja de estilos para móviles ahora
Comentario por Juan - 19 de julio 2011 #
Marcel buena noticia. Mantenga el buen trabajo!
Comentario por Eduardo Lundgren - 21 de julio 2011 #
[...] Next-Gen YSlow impulsado por YUI [...]
Pingback por Mejores Prácticas para acelerar su sitio web «Chandara - 25 de julio 2011 #
Yo no soy un desarrollador, pero estoy interesado en el rendimiento de la aplicación ove la WAN e Internet. Lo probé por primera vez y funcionó muy bien para mí. Gracias por poner el esfuerzo en ...
Comentario por Acantilado Chapman - 27 de julio 2011 #

Deja un comentario

Desarrollado por WordPress en Yahoo! Web Hosting .

Yahoo! interfaz de usuario de blog (YUIBlog)