Next-Gen YSlow powered by YUI

18 juli 2011 om 21:17 door Marcel Duran | In Ontwikkeling , Uitvoering | 4 Opmerkingen

Een paar weken geleden, Yahoo! kondigde YSlow for Mobile op Velocity 2011 , waardoor de kracht van YSlow prestatie-analyse naar de mobiele wereld.

YSlow voor Mobile werkt als een bookmarklet , die het mogelijk maakt om te draaien op andere browsers dan Firefox (als een add-on) of Chrome (als extensie) .

De YSlow architectuur werd gedeeltelijk opnieuw ontworpen om te werken cross-platform en YUI was de belangrijkste factor in het maken sandboxing, cross-browser abstractie en eenvoudig YQL toegang mogelijk te maken.

Sandboxing

Om te worden ingebed op een pagina zonder zich te bemoeien met de prestatie-analyse en zonder knoeien met de pagina zelf, YSlow is een bookmarklet die JavaScript en CSS injecteert in een pagina door gebruik te maken van de kracht van YUI sandboxing:

Bookmarklet URL: 

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

De code hierboven in:

  • maakt een lege iframe;
  • deze toegevoegd aan de pagina lichaam;
  • verbergt de iframe *;
  • krijgt het venster handler;
  • schrijft in de inhoud ervan het lichaam van de iframe;
  • dit lichaam is leeg, maar heeft een onload event
  • de onload event bepaalt hoe te injecteren YSlow JS:
    • stelt YUI_config , zo win en doc verwijst naar de pagina die wordt geanalyseerd window en document respectievelijk
    • dynamisch injecteert YSlow URL door een script element in iframe's head

* De iframe wordt weergegeven tegen de tijd dat alle YSlow presentatie activa worden geladen

Dit plaatst een iframe in de pagina wordt geanalyseerd. Dit iframe zal fungeren als een zandbak omgeving en YSlow zal verblijven op het. Aangezien het iframe wordt dynamisch gemaakt zonder de src attribuut, zal het de toegang tot zijn ouder (de pagina die wordt geanalyseerd) omdat er geen beleid voor dezelfde oorsprong overtreding gebeurt daar.

De YUI_config object handig is, omdat het stelt win en doc aan de moedermaatschappij van de iframe's (de pagina die wordt geanalyseerd), dus alle nieuwe YUI Zo zal worden gebonden aan het bovenliggende document standaard bedrading elke oproep tot Y.all en Y.one door Y.config.win of Y.config.doc van de YUI use terugbellen.

YSlow's presentatie is in handen van de iframe window en document referenties, waardoor de YSlow belangrijkste script om de opmaak te maken, alsmede de externe CSS binnen dit iframe te halen zonder in conflict met stijlen de bovenliggende pagina's. YSlow scant de bovenliggende pagina in om alle componenten (afbeeldingen, scripts, links, achtergrond-afbeeldingen, flash, etc.) die nodig zijn voor latere prestatie-analyse te krijgen. Dit wordt gedaan door de toegang tot Y.config.win en Y.config.doc , omdat zij verwijzen naar de bovenliggende pagina.

Cross-browser abstractie

Omdat het een bookmarklet, is YSlow voor Mobile geacht te werken op elke browser *. YUI abstraheert cross-browser problemen door het normaliseren van browser verschillen, wat resulteert in een schone, eenvoudig te lezen en te onderhouden codebase.

YSlow is niet volledig overgezet naar YUI 3 - alleen de controller laag (van de komende App component) voor nu - maar toch, alle DOM manipulatie en event handling worden gedaan door de node -en event modules. In toekomstige releases zijn we van plan om meer YSlow functies over te zetten naar YUI 3.

* Niet alle browsers worden momenteel ondersteund

YQL

YSlow analyseert pagina's door het controleren van de HTTP-headers voor de componenten vinden op de pagina. HTTP response headers zijn niet beschikbaar in de pagina, dus die onderdelen opnieuw moeten worden aangevraagd met het oog voor YSlow te krijgen van de response header informatie. Dit kan worden bereikt door het vragen van de lijst van de component-URL's door middel van XMLHttpRequest (AJAX) maar helaas als gevolg van beleid voor dezelfde oorsprong beperking , is dit niet mogelijk, tenzij alle onderdelen in hetzelfde domein als de pagina die is zeer onwaarschijnlijk.

Een gemeenschappelijke oplossing voor het beleid voor dezelfde oorsprong beperking wordt met behulp van JSONP, waar een externe server werkt als een proxy verzoek aan de lijst met onderdelen URL's en het ophalen van hun HTTP response headers namens YSlow. Door de populariteit YSlow's en de recente mobiele prestaties analyse-inspanningen, verwachten we vrij zwaar verkeer voor de YSlow voor mobiele bookmarklet. Om dit vervoer te ondersteunen, YQL was de schaalbare oplossing van YSlow door middel van een open data tabel met de naam data.headers , die de respons headers en inhoud haalt voor een bepaalde lijst met URL's, terwijl zich voordoen als de user-agent om ervoor te zorgen de verwachte inhoud opgehaald.

De YQL Query component doet al het werk van het beheer van YQL vragen, terwijl het beheer JSONP verzoeken onder de motorkap, waardoor de YSlow controller code veel eenvoudiger en makkelijk te onderhouden.

Toekomstige uitbreidingen: Nieuwe YSlow voor Mobile interface

Momenteel is de YSlow voor mobiele gebruikerservaring is hetzelfde als de desktop ervaring. Omgaan met een lange lijst van prestatie-analyse van gegevens is niet de beste ervaring op kleine smartphone-schermen. Sinds YUI ook abstraheert cross-apparaat gebaren , YSlow voor Mobile zal een gloednieuwe mobiele interface te krijgen in toekomstige versies.

Prestaties van de prestaties van gereedschap

YSlow voor mobiele inzet werd zorgvuldig gezien de prestaties van invloed op de laadtijd van de pagina die wordt geanalyseerd. De YUI 3 modules gebruikt worden op YSlow werden onderzocht om alleen de modules die nodig zijn om YSlow laden zo snel mogelijk op te nemen. De YUI zaad bestand en Loader werden niet opgenomen omdat alle noodzakelijke modules en submodules werden samengevoegd volgende optreden Ryan Grove's Zen tips, die het mogelijk maakten om samen te laden alles in een kleine enkel verzoek: YSlow-bookmarklet.js: 204kB, 66KB ( gzip) waarbij:

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

Meer informatie over YSlow

Keep up-to-date met de laatste YSlow aankondigingen door:

Marcel Duran Over de auteur: Marcel Duran is de Front End Lead voor Yahoo! 's Uitzonderlijk Performance Team. Hij is in web optimalisatie van prestaties op high traffic sites in Yahoo! Front Page en Search teams waar hij toegepast en onderzocht webprestaties best practices maken van pagina's nog sneller. Hij is nu gewijd aan YSlow en andere prestatie-instrumenten ontwikkelen, onderzoeken en evangelisatie. Zijn doel is om het internet nog sneller te maken dan het kan zijn en gelooft dat er niet zoiets als "slechts een paar milliseconden kan geen kwaad".

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

4 Commentaren »

RSS feed voor reacties op dit bericht. TrackBack URI

  1. Het kan zeker nu gebruik maken van een mobiele stylesheet

    Reactie door Juan - 19 juli 2011 #

  2. Goed nieuws Marcel. Houd het goede werk!

    Reactie door Eduardo Lundgren - 21 juli 2011 #

  3. [...] Next-Gen YSlow powered by YUI [...]

    Pingback door Best Practices voor het versnellen van uw website «Chandara - 25 juli 2011 #

  4. Ik ben geen ontwikkelaar, maar ben geïnteresseerd in de App prestaties ove het WAN en internet. Ik probeerde het voor de eerste keer en het werkte prima voor mij. Dank voor het aanbrengen van de inspanning in ...

    Reactie door Cliff Chapman - 27 juli 2011 #

Plaats een reactie

Let op: Reacties worden gemodereerd voor first-timers. Spam verwijderd.

XHTML: <a href="" title="tijdens <abbr title="tijdens <acronym title="tijdens <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <Q cite=""> <strike> <strong>

Hosted by Yahoo!

Copyright © 2006-2012 Yahoo! Inc Alle rechten voorbehouden. Privacy Policy - Gebruiksvoorwaarden

Powered by WordPress op Yahoo! Web Hosting .