Next-Gen YSlow powered by YUI »Yahoo! User Interface Blog (YUIBlog)

Next-Gen YSlow Powered by YUI

18 lug 2011 alle 09:17 da Marcel Duran | In Development , le prestazioni | 4 Comments

Un paio di settimane fa, Yahoo! ha annunciato YSlow for Mobile a Velocity 2011 , portando la potenza di analisi delle performance YSlow per il mondo mobile.

YSlow for Mobile funziona come un bookmarklet , che permette di girare su browser diversi da Firefox (come un add-on) o Chrome (come estensione) .

L'architettura YSlow è stata parzialmente ridisegnata per lavorare cross-platform e YUI è stato il fattore essenziale per rendere sandboxing, cross-browser astrazione e semplice l'accesso YQL possibile.

Sandboxing

Al fine di essere incorporato in una pagina senza interferire con l'analisi delle prestazioni e senza fare confusione con la pagina stessa, YSlow è un bookmarklet che inietta JavaScript e CSS in qualsiasi pagina sfruttando la potenza di YUI sandboxing:

Bookmarklet URL:

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

Il codice sopra:

crea un vuoto iframe;
aggiunge al corpo della pagina;
nasconde la * iframe;
prende il suo gestore di finestra;
scrive nel suo contenuto nel corpo del iframe;
questo corpo è vuoto, ma ha un onload evento
l' onload evento definisce come iniettare YSlow JS:
- imposta YUI_config , in modo da win e doc punti alla pagina analizzata window e document , rispettivamente,
- inietta dinamicamente URL YSlow creando uno script elemento in iframe di head

* L'iframe viene visualizzato dal momento in cui sono caricati tutti i beni di presentazione YSlow

Questo metterà un iframe nella pagina analizzata. Questo iframe fungerà da ambiente a tenuta stagna e YSlow risiederanno all'interno di esso. Dal momento che l'iframe viene creato dinamicamente senza src attributo, avrà accesso alla casa madre (la pagina in fase di analisi) perché non c'è politica di origine stessa violazione succedendo.

Il YUI_config oggetto è utile perché pone win e doc al padre del iframe (la pagina in fase di analisi), quindi ogni nuova istanza YUI sarà vincolato al documento principale per impostazione predefinita, il cablaggio qualsiasi chiamata a Y.all e Y.one attraverso Y.config.win o Y.config.doc dal YUI use callback.

Presentazione di YSlow è gestito dal iframe window e document riferimenti, consentendo lo script YSlow principale per il rendering del markup così come prendere il CSS esterno all'interno di questo iframe senza entrare in conflitto con gli stili della pagina principale. YSlow esegue la scansione della pagina principale per ottenere tutte le componenti (immagini, script, link, background-immagini, flash, ecc) necessari per l'analisi delle prestazioni più tardi. Questo viene fatto accedendo Y.config.win e Y.config.doc , in quanto si riferiscono alla pagina padre.

Cross-browser astrazione

Essendo un bookmarklet, YSlow for Mobile dovrebbe funzionare su qualsiasi * browser. YUI astrae cross-browser problemi normalizzando differenze tra i browser, risultando in un ambiente pulito, di facile lettura e gestibile codebase.

YSlow non è completamente supportato da YUI 3 - solo lo strato controller (dal componente App prossimo) per ora - ma ancora, ogni manipolazione DOM e la gestione degli eventi sono fatte dai node ed event moduli. Nelle future versioni ci proponiamo di trasferire le caratteristiche più per YSlow YUI 3.

* Non tutti i browser sono attualmente supportati

YQL

YSlow analizza le pagine controllando le intestazioni HTTP per gli elementi presenti sulla pagina. Intestazioni di risposta HTTP non sono disponibili nella pagina, quindi i componenti devono essere richiesti nuovamente per YSlow per ottenere le informazioni di intestazione di risposta. Questo potrebbe essere ottenuto richiedendo l'elenco degli URL componente tramite XmlHttpRequest (AJAX), ma purtroppo a causa della restrizione stessa politica di origine , questo non è possibile a meno che tutti i componenti sono nello stesso dominio della pagina che è molto improbabile.

Una soluzione comune per la stessa restrizione politica di origine utilizza JSONP, in cui un server esterno funziona da proxy richiedendo l'elenco di URL componenti e recuperando la loro intestazioni di risposta HTTP per conto di YSlow. Grazie alla popolarità YSlow e recente Mobile sforzi di analisi delle prestazioni, ci aspettiamo di traffico molto pesante per la YSlow per bookmarklet Mobile. Al fine di sostenere tale traffico, YQL era la soluzione scalabile adottata da YSlow attraverso una tabella di dati aperta denominata data.headers , che recupera le intestazioni di risposta e contenuti per una lista di URL durante la rappresentazione del user-agent per garantire il contenuto atteso è recuperati.

Il Query YQL componente fa tutto il lavoro di gestione delle query YQL mentre la gestione delle richieste JSONP sotto il cofano, rendendo il codice di controllo YSlow molto più semplice e facile da mantenere.

Miglioramenti futuri: YSlow New for Mobile interfaccia amichevole

Attualmente il YSlow per la user experience mobile è lo stesso come l'esperienza desktop. Trattare con un lungo elenco di dati di analisi delle prestazioni non è la migliore esperienza su piccoli schermi di smart-phone. Dal momento che YUI astrae anche cross-device gesti , YSlow for Mobile avranno un nuovo marchio mobile-friendly nelle versioni future.

Prestazioni dello strumento di prestazioni

YSlow per la distribuzione mobile è stata fatta con attenzione considerando il suo impatto sulle prestazioni del tempo di caricamento della pagina analizzata. I 3 moduli utilizzati per YUI YSlow sono stati esaminati per includere solo i moduli necessari per caricare YSlow il più velocemente possibile. Il file seme YUI e Loader non sono stati inclusi dal momento che tutti i moduli e sottomoduli sono stati combinati tra loro seguendo Ryan Grove prestazioni Zen suggerimenti, che hanno reso possibile il caricamento di tutto insieme in una sola piccola richiesta sola: YSlow-bookmarklet.js: 204KB, 66KB ( gzip) dove:

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

Ulteriori informazioni YSlow

Tieniti aggiornato con gli annunci più recenti YSlow per:

Visitando la pagina YSlow ridisegnata a getyslow.com
YSlow gradimento su Facebook: facebook.com / getyslow
YSlow seguito su Twitter: twitter.com / getyslow

Circa l'autore: Marcel Duran è il lead front-end per Performance Team Yahoo! 's eccezionale. E 'stato in ottimizzazione delle prestazioni su siti web ad alto traffico in Page Yahoo! anteriore e squadre di ricerca applicata e dove ha studiato prassi esecutiva migliori pagine web rendendo ancora più veloce. Egli è ora dedicato a YSlow e altri strumenti di sviluppo delle prestazioni, ricerche e l'evangelizzazione. Il suo obiettivo è di rendere il web ancora più veloce di quanto possa essere, e crede che non esiste una cosa come "pochi millisecondi non farà male".

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

4 commenti »

RSS feed dei commenti a questo post. TrackBack URI

Si potrebbe sicuramente utilizzare un foglio di stile mobile ora
Commento di Juan - 19 Luglio 2011 #
Buone notizie Marcel. Mantenere il buon lavoro!
Commento di Eduardo Lundgren - 21 Luglio 2011 #
[...] Next-Gen YSlow powered by YUI [...]
Pingback di Best Practices per velocizzare il tuo sito Web «Chandara - 25 Luglio, 2011 #
Io non sono uno sviluppatore, ma sono interessato a prestazioni App uovere la WAN e Internet. L'ho provato per la prima volta e ha funzionato per me. Grazie per lo sforzo di mettere in ...
Commento di Cliff Chapman - 27 Luglio 2011 #

Lascia un commento

Yahoo! User Interface Blog (YUIBlog)