Next-Gen YSlow Powered by Yui

18.července 2011 v 9:17 hod. od Marcela Duran | V rozvoji a výkonu záložky | 4 Komentáře

Před několika týdny, Yahoo! oznámil YSlow pro mobilní telefony na Velocity 2011 , přinášet sílu analýzy výkonnosti YSlow do mobilního světa.

YSlow pro mobilní pracuje jako bookmarklet , takže je možné spustit na jiných prohlížečů než Firefox (jako doplněk) nebo chrom (jako rozšíření) .

Architektura YSlow byl částečně přepracován pro práci na platformě a YUI je základním faktorem, aby tzv. sandboxu, cross-browser abstrakce a jednoduché YQL přístup možný.

Sandboxu

Aby mohla být vložená na stránce, aniž by zasahoval analýzu výkonnosti a bez probírat s vlastní stránku, YSlow je bookmarklet, který vstřikuje JavaScript a CSS do libovolné stránky s využitím síly Yui sandboxu:

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>
         <Tělo onload = "
             YUI_config = {
                 výhra: window.parent,
                 doc: window.parent.document
             };
             var d = doklad;
             d.getElementsByTagName (\ "vedoucí \") [0]
                 . AppendChild (
                     d.createElement (\ 'skript \ ")
                 ). Src = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \' "
         >
     ');
     o.close ()
 } (Dokument))

Výše uvedený kód:

  • vytvoří prázdný iframe;
  • připojí jej na stránky orgánu;
  • skrývá soubor * iframe;
  • dostane jeho okna ovladače;
  • zapíše do jeho obsahu do těla iframe;
  • tento orgán je prázdný, ale má onload událost
  • onload událost definuje, jak aplikovat YSlow JS:
    • stanoví YUI_config , takže win a doc poukazuje na stránce v současné době analyzují window a document , respektive
    • dynamicky se vstřikuje YSlow URL vytvořením script prvek do iframe na head

* Iframe se zobrazí v době, kdy všechny YSlow prezentace aktiva jsou nahrány

To bude klást iframe do stránky se analyzují. Tento iframe bude působit jako sandboxed prostředí a YSlow bude bydlet v něm. Vzhledem k tomu, iframe je dynamicky vytvořen bez src atributu, bude mít přístup ke své mateřské společnosti (str. analyzován), protože není stejného původu politika porušení tam děje.

YUI_config Objekt je po ruce, protože to určuje win a doc s rodiči IFRAME strany (str. analyzované), a tak každá nová instance YUI bude vázán na mateřské dokumentu ve výchozím nastavení, kabeláže žádné volání Y.all a Y.one přes Y.config.win nebo Y.config.doc z Yui use zpětného volání.

YSlow prezentace je zpracována iframe window a document odkazy, což YSlow hlavní skript k tomu, aby se značky, stejně jako načítat externí CSS v této iframe, aniž by v rozporu s nadřazenou stránku v stylů. YSlow naskenuje nadřízenou stránku, aby si všechny součásti (obrázky, skripty, odkazy, obrázky na pozadí,, flash apod.) potřebné pro pozdější analýzu výkonnosti. To se provádí pomocí přístupu Y.config.win a Y.config.doc , protože oni se odkazují na mateřské straně.

Cross-browser abstrakce

Být bookmarklet, je YSlow pro mobilní zařízení mělo fungovat na všech prohlížeč *. YUI abstrahuje cross-browser problémy tím, že normalizace prohlížeče rozdíly, což v čistém a snadno číst a udržovatelné codebase.

YSlow nebyla plně portován na YUI 3 - pouze regulátor vrstva (z připravované App složku) pro tuto chvíli - ale přesto jsou všechny manipulace DOM a zpracování událostí provádí pomocí node a event modulů. V budoucích verzích plánujeme do přístavu více YSlow funkcí Yui 3.

* Ne všechny prohlížeče jsou podporovány

YQL

YSlow analyzuje stránek kontrolou HTTP hlaviček pro součásti nalezených na stránce. HTTP hlavičky odpovědi nejsou k dispozici na stránce, tudíž tyto komponenty je třeba požádat znovu, aby pro YSlow dostanete odpověď informace v hlavičce. To by mohlo být dosaženo, a vyžádat si seznam komponent URL pomocí XMLHttpRequest (AJAX), ale bohužel z důvodu téhož původu politiky omezení , to není možné, pokud všechny komponenty jsou ve stejné doméně jako stránka, která je velmi nepravděpodobné.

Společná řešení pro omezení stejného původu politiky, pomocí JSONP, kde pracuje jako externí server proxy požaduje seznam součástí URL a jejich načítání HTTP hlavičky odpovědi na účet YSlow. Vzhledem k popularitě a jeho YSlow posledních mobilních úsilí analòz, čekáme velmi silný provoz na YSlow pro mobilní bookmarklet. S cílem podpořit pravidelnou leteckou dopravu, YQL bylo škálovatelné řešení přijaté YSlow prostřednictvím otevřené datové tabulky s názvem data.headers , který načte hlavičky odpovědi a obsah na základě seznamu adres URL, zatímco se vydávat za user-agenta, aby očekávaný obsah je získat.

YQL Dotaz složka dělá všechnu práci pro správu YQL dotazy při řízení JSONP žádostí pod kapotou, takže řadiče YSlow kód mnohem jednodušší a snadno udržovat.

Budoucí vylepšení: Nová YSlow pro mobilní přívětivého rozhraní

V současné době YSlow pro mobilní uživatele zkušenost je stejná jako práce s počítačem. Jednání s dlouhým seznamem dat pro analýzu výkonnosti není nejlepší zážitek na malé chytré telefonů obrazovek. Vzhledem k tomu, YUI také abstrahuje křížové zařízení gesta , bude YSlow pro mobilní dostat zbrusu nový mobilní přívětivé rozhraní v budoucích verzích.

Výkon výkonný nástroj

YSlow nasazení mobilní byla provedena pečlivě s ohledem na její vliv na výkon na doby načítání stránky se analyzují. V Yui 3 moduly používané na YSlow byly přezkoumány, aby obsahovala pouze moduly potřebné pro načtení YSlow tak rychle, jak je to možné. Osivo YUI soubor a nakladače nebyly zahrnuty , protože všechny potřebné moduly a submodulů byly spojeny dohromady po výkonu Ryana Grove Zen hroty, které umožnily zavést všechno do jednoho malého jediné přání: YSlow-bookmarklet.js: 204 KB, 66 kb ( gzip), pokud:

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

Více o YSlow

Mějte up-to-data s nejnovějšími YSlow oznámení podle:

Marcel Duran O autorovi: Marcel Duran je Front End kabel pro Yahoo! mimořádný Performance Team. Byl na optimalizaci webových výkon na vysoké návštěvnosti stránek v přední stránky Yahoo! Search a týmy, kde, a to zkoumal webové výkon osvědčených postupů dělat stránky ještě rychleji. On je nyní věnována YSlow a další funkční nástroje vývoje, výzkumů a hlásání evangelia. Jeho cílem je, aby na internetu ještě rychleji než to může být a je přesvědčen, že žádná taková věc jako "jen několik milisekund nebude bolet."

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

4 Komentáře »

RSS komentářů k tomuto příspěvku. TrackBack URI

  1. Mohlo by to určitě používat mobilní stylů nyní

    Komentář od Juan - 19. července 2011 #

  2. Dobrá zpráva Marcel. Udržet v dobré práci!

    Komentář od Eduardo Lundgren - červenec 21, 2011 #

  3. [...] Next-Gen YSlow poháněných Yui [...]

    Pingback podle osvědčených postupů pro Urychlení webu «Chandara - 25.července 2011 #

  4. Nejsem vývojář, ale zajímá výkon App ove WAN a Internetu. Zkusila jsem to poprvé a vyšlo to i pro mě. Díky za uvedení úsilí ...

    Komentář od Cliff Chapman - 27. července 2011 #

Zanechat komentář

Poznámka: Komentáře jsou moderovány pro první úvazek. Spam odstraněny.

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

Moderuje Yahoo!

Copyright © 2006-2012 Yahoo! Inc Všechna práva vyhrazena. Ochrana osobních údajů - Podmínky služby

Powered by WordPress na Yahoo! Web Hosting .