Next-Gen YSlow bereitgestellt von YUI

18. Juli 2011 um 21.17 Uhr von Marcel Duran | In Entwicklung , Leistung | 4 Kommentare

Ein paar Wochen, kündigte Yahoo! YSlow for Mobile bei Velocity 2011 , womit sich die Macht der YSlow Performance-Analyse, um die mobile Welt.

YSlow for Mobile arbeitet als Bookmarklet , die es ermöglichen, auf andere Browser als laufen Firefox (als Add-on) oder Chrom (als Verlängerung) .

Die YSlow Architektur wurde teilweise neu gestaltet, um Arbeit Cross-Plattform-und YUI war der wesentliche Faktor in einer Sandbox machen, Cross-Browser-Abstraktion und einfache YQL Zugriff möglich.

Sandboxing

Um auf einer Seite, ohne sich mit Performance-Analyse und ohne Unordnung mit der Seite selbst eingebettet werden, ist YSlow ein Bookmarklet, dass JavaScript und CSS spritzt in jede Seite durch die Nutzung der Leistung von YUI Sandbox:

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 (). write ('
         <head>
         <Body onload = "
             YUI_config = {
                 win: window.parent,
                 doc: window.parent.document
             };
             var d = document;
             d.getElementsByTagName (\ 'Kopf \') [0]
                 . AppendChild (
                     d.createElement (\ 'script \')
                 ). Src = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \' "
         >
     ');
     o.close ()
 } (Dokument))

Der obige Code:

  • erzeugt ein leeres iframe;
  • hängt es an der Seite Körpers;
  • Blendet die iframe *;
  • bekommt seine Fenster-Handler;
  • schreibt in seinem Inhalt den Körper des iframe;
  • dieser Körper ist leer, hat aber eine onload -Ereignis
  • das onload -Ereignis definiert, wie YSlow JS injizieren:
    • setzt YUI_config , so win und doc verweist auf die Seite, die analysiert werden window und document bzw.
    • dynamisch injiziert YSlow URL durch die Schaffung eines script -Element in iframe head

* Der iframe ist durch die Zeit alle YSlow Präsentation Vermögenswerte werden geladen angezeigt

Dies wird ein iframe in die Seite, die analysiert Platz. Das iframe wird als einer Sandbox-Umgebung agieren und YSlow wird darin wohnen. Seit dem iframe dynamisch ohne geschaffen src -Attribut, wird es Zugang zu ihren Eltern (die Seite, die analysiert werden), weil es keine Same Origin Policy Verletzung passiert es.

Die YUI_config Objekt ist praktisch, weil es setzt win und doc der iframe-Muttergesellschaft (die Seite, die analysiert werden), damit keine neuen YUI-Instanz wird auf das übergeordnete Dokument standardmäßig Verdrahtung jedem Aufruf gebunden Y.all und Y.one durch Y.config.win oder Y.config.doc aus dem YUI use Rückruf.

YSlow Präsentation ist durch das iframe gehandhabt window und document Verweise, so dass die YSlow Haupt-Script, um das Markup rendern sowie holen die externe CSS in diesem iframe ohne in Konflikt mit der übergeordneten Seite der Stile. YSlow scannt die übergeordnete Seite, um alle Komponenten (Bilder, Skripte, Links, Hintergrund-Bilder, Flash, etc.) für die spätere Performance-Analyse erforderlich zu bekommen. Dies ist durch den Zugriff getan Y.config.win und Y.config.doc , da sie zu der übergeordneten Seite verweisen.

Cross-Browser-Abstraktion

Als ein Bookmarklet ist YSlow for Mobile soll in jedem Browser funktionieren *. YUI Abstracts Cross-Browser-Probleme durch die Normalisierung der Browser-Unterschiede, die sich in einem sauberen, leicht zu lesen und zu warten Codebasis.

YSlow war nicht vollständig auf YUI 3 portiert - nur der Controller-Schicht (aus dem kommenden App-Komponente) für den Moment - aber immer noch, alle DOM-Manipulation und Event-Handling werden durch die getan node und event -Module. In zukünftigen Versionen planen wir weitere YSlow Funktionen YUI 3-Port.

* Nicht alle Browser werden derzeit unterstützt

YQL

YSlow Analysen Seiten, indem Sie die HTTP-Header für die Komponenten auf der Seite gefunden. HTTP-Response-Header werden nicht auf der Seite zur Verfügung, damit diese Komponenten müssen neu angefordert werden, um für YSlow erhalten die Antwort-Header-Informationen. Dies könnte durch Anforderung der Liste der Komponenten-URLs durch XMLHttpRequest (AJAX) erreicht werden, aber leider aufgrund der Same Origin Policy Einschränkung , dies ist nicht möglich, wenn alle Komponenten in der gleichen Domäne wie die Seite, die sehr unwahrscheinlich ist, werden.

Eine gemeinsame Workaround für Same Origin Policy Einschränkung ist mit JSONP, wo einem externen Server arbeitet als Proxy-Anforderung der Liste der Komponenten URLs und Abrufen ihrer HTTP-Response-Header im Namen YSlow. Aufgrund YSlow die Popularität und die jüngsten mobilen Performance-Analyse Bemühungen, erwarten wir ganz stark befahrenen für die YSlow for Mobile Bookmarklet. Um diesen Verkehr zu unterstützen, YQL war der skalierbaren Lösung von YSlow durch eine angenommene offene Datentabelle namens data.headers , die die Response-Header und Inhalte abruft, für eine bestimmte Liste von URLs, während die Identität der User-Agent, um sicherzustellen, dass die erwarteten Inhalte abgerufen werden.

Die YQL Abfrage Komponente macht die ganze Arbeit der Verwaltung YQL Anfragen bei der Verwaltung JSONP Anfragen unter der Haube, so dass die YSlow Controller-Code wesentlich einfacher und leicht zu pflegen.

Zukünftige Erweiterungen: New YSlow for Mobile Interface

Derzeit YSlow für Mobile User Experience ist die gleiche wie die Desktop-Erfahrung. Der Umgang mit einer langen Liste von Performance-Analyse von Daten ist nicht die beste Erfahrung auf kleinen Smartphone-Bildschirmen. Da YUI auch Abstracts cross-device Gesten , YSlow for Mobile erhalten Sie eine brandneue mobile-Schnittstelle in zukünftigen Versionen.

Durchführung von Performance-Tool

YSlow für den mobilen Einsatz wurde sorgfältig angesichts ihrer Auswirkungen auf die Leistung der Ladezeit der Seite, die analysiert werden. Die YUI 3 Module auf YSlow verwendet wurden geprüft, um nur die benötigten Module zu YSlow so schnell wie möglich zu laden sind. Die YUI-Seed-Datei und Loader wurden nicht berücksichtigt , da alle notwendigen Module und Submodule zusammen waren folgende kombiniert Ryan Grove Performance Zen Tipps, die es ermöglicht, alles zusammen laden zu einem einzigen kleinen einziger Antrag gestellt: YSlow-bookmarklet.js: 204KB, 66KB ( gzip) mit:

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

Mehr über YSlow

Bleiben Sie up-to-date mit den neuesten YSlow Ankündigungen:

Marcel Duran Über den Autor: Marcel Duran ist das Front-End-Lead für Yahoo! 's Exceptional Performance Team. Er hat sich in Web-Performance-Optimierung auf High Traffic Sites in Yahoo! Front Page und Search-Teams, wo er angewendet und erforscht Web-Performance Best Practices machen Seiten sogar noch schneller gewesen. Er ist jetzt auf YSlow und andere Performance-Tools Entwicklung, Recherchen und Evangelisation gewidmet. Sein Ziel ist es, das Web noch schneller als es sein kann, und glaubt, dass es nicht so etwas wie "nur ein paar Millisekunden wird nicht weh tun."

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

4 Kommentare »

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI

  1. Es könnte auf jeden Fall nutzen eine mobile Stylesheet jetzt

    Kommentar von Juan - 19. Juli 2011 #

  2. Gute Nachrichten Marcel. Halten Sie die gute Arbeit!

    Kommentar von Eduardo Lundgren - 21. Juli 2011 #

  3. [...] Next-Gen YSlow von YUI angetrieben [...]

    Pingback von Best Practices für Speeding Up Your Web Site «Chandara - 25. Juli 2011 #

  4. Ich bin kein Entwickler, sondern interessiere mich für App Leistung ove das WAN und Internet. Ich versuchte es zum ersten Mal und es funktionierte gut für mich. Danke, dass der Aufwand in ...

    Kommentar von Cliff Chapman - 27. Juli 2011 #

Hinterlasse einen Kommentar

Hinweis: Kommentare sind für Erstbesucher moderiert. Spam gelöscht.

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

Hosted by Yahoo!

Copyright © 2006-2012 Yahoo! Inc. Alle Rechte vorbehalten. Datenschutzbestimmungen - Nutzungsbedingungen

Präsentiert von WordPress auf Yahoo! Web Hosting .