Next-Gen YSlow Осъществено от Юи

Юли 18, 2011 21:17 от Марсел Дюран | в развитието , изпълнението | 4 Коментари

Преди няколко седмици, Yahoo! обяви YSlow за мобилни устройства на Velocity 2011 , с което властта на YSlow анализ изпълнение на мобилния свят.

YSlow за мобилни работи като отметка , което прави възможно да се движат по други браузъри, отколкото Firefox (като добавка) или Chrome (като допълнение) .

Архитектурата на YSlow е частично преработени, за да работят по-платформа и Юи е съществен фактор в sandboxing, крос-браузър абстракция и на прост YQL достъп възможно.

Sandboxing

За да бъде вграден в страницата, без да се намесва с анализ на ефективността на и без да се обърква със самата страница, YSlow е една отметка, който инжектира JavaScript и CSS в която и да е страница, чрез повишаване на силата на Юи sandboxing:

Отметка URL: 

 JavaScript: (функция (Y, P, о) {р = y.body.appendChild (y.createElement ("Iframe")); p.id = 'YSlow отметка "; на дисплея p.style.cssText =': няма "; О, = p.contentWindow.document; o.open () напиши (" <head> <тялото onload = "YUI_config = {победа: window.parent, докторе: window.parent.document}; и VAR г = документ; d.getElementsByTagName (\ "началник \ ') [0]. appendChild (d.createElement (\" скрипт \ ")). може да = \' http://d.yimg.com/jc/yslow-bookmarklet.js \ "> '); o.close ()} (документ))

Кодът по-горе:

  • създава празен Iframe;
  • добавя тя към страницата орган;
  • скрива * Iframe ";
  • получава прозорец манипулатор;
  • пише в неговото съдържание тялото на вградена рамка;
  • това тяло е празна, но има един onload събитие
  • onload събитие определя как да инжектирате YSlow JS:
    • , определя YUI_config , така че win и на doc точки към страницата, се анализират window и document
    • динамично инжектира YSlow URL чрез създаване на script елемент в Iframe head

* Вградена рамка се показва по време на всички презентации YSlow активи са заредени

Това ще постави вградена рамка в страницата се анализират. Това Iframe ще действа като sandboxed среда, и YSlow ще да пребивават в него. Тъй като на Iframe е създаден динамично без src атрибут, то ще има достъп до майка (страницата се анализират), защото има не един и същ произход за нарушение на правилата, което се случва там.

В YUI_config обектът е удобен, защото тя определя win и doc майка Iframe (страницата се анализират), като по този начин всяка нова инстанция Юи ще бъде обвързана към майка документ по подразбиране, окабеляване всяка покана на Y.all и Y.one чрез Y.config.win или Y.config.doc от по Юи use обратно.

Представяне YSlow се обработва от Iframe window и document препратки, което позволява YSlow главния скрипт, за да се направи за маркиране, както и донесе външен CSS в рамките на този Iframe, без да влиза в конфликт с стилове майка. YSlow сканира майка страница, за да получите всички компоненти (изображения, скриптове, връзки, фон-изображение, флаш и т.н.), необходими за по-късно анализ на ефективността. Това се прави чрез достъп Y.config.win и Y.config.doc , тъй като те се отнасят към страницата майка.

Cross-браузър абстракция

Като една отметка, YSlow за мобилни устройства е трябвало да работят на всеки браузър *. Юи се абстрахира въпросите, свързани с различни браузъри, като нормализиране на браузъра различия, в резултат на чиста, лесна за четене и възможна за поддържане програмния код.

YSlow, не ​​е напълно пренесли до Юи 3 - само контролера слой, (от предстоящия компонент App) за сега - но все пак, всички DOM манипулация и обработка на събитие се извършва от node и event модули. В бъдещите версии, ние планираме да пренесете повече функции YSlow Юи 3.

* Не всички браузъри се поддържат в момента

YQL

YSlow анализира страници, като проверка на HTTP хедъри за компонентите, намерени на страницата. HTTP отговор заглавията за грешка не са налични в страницата, следователно тези компоненти трябва да бъдат поискани отново с цел за YSlow, за да получите информация заглавие отговор. Това може да се постигне, като се иска списък с URL адреси на компонент чрез XMLHttpRequest (AJAX), но за съжаление поради ограничение със същия произход политика , това не е възможно, освен ако всички компоненти са в същия домейн като на страницата, което е много малко вероятно.

Една обща заобиколно решение за ограничение на същия произход политика се използва JSONP, където работи като прокси иска списък от компоненти, URL адреси и извличане на HTTP заглавия на отговор от името на YSlow външен сървър. Поради популярността на YSlow и последните мобилни анализ на ефективността на усилията, ние очакваме доста тежък трафик за YSlow за Mobile отметка,. За да подкрепи такъв трафик, YQL е мащабируемо решение, прието от на YSlow чрез отворена таблица с данни, име data.headers , които извлича отговор горни и съдържание за даден списък с URL адреси, докато се представя за User-Agent, за да се гарантира, очаквано съдържание е възстановен.

Запитване на YQL компонент върши цялата работа на управление на YQL запитвания по време на управлението на JSONP заявки под капака, което прави контролера YSlow код много по-прости и лесни за поддръжка.

Бъдещи подобрения: Нова YSlow за мобилни приятелски интерфейс

В момента на YSlow за мобилния потребител опит е същата, както на работния плот опит. Справяне с дълъг списък на данни за резултатите от анализи, не е най-добрият опит на малки екрани смарт-телефони. От Юи абстрахира кръстосано устройство жестове , YSlow за мобилни устройства ще получи чисто нов мобилен лесен интерфейс в бъдещите версии.

Извършване на изпълнение инструмент

На YSlow за разгръщане Mobile е направена внимателно от гледна точка на ефективност на въздействие върху времето за зареждане на страницата се анализират. Юи 3 модула, които се използват за YSlow са били проверявани, за да бъдат включени само модулите, необходими, за да заредите YSlow възможно най-бързо. Семето Юи файл и Loader не бяха включени, тъй като всички необходими модули и submodules, са комбинирани заедно, Райън Grove за изпълнение на Дзен съвети, които направиха възможно да се зареди всичко заедно в един малък една молба: YSlow bookmarklet.js: 204KB, 66KB ( GZIP), където:

  • На Юи: 75KB, 27KB (GZIP)
  • YSlow: 129KB, 39KB (GZIP)

Повече за YSlow

Бъдете постоянно в течение за дата с най-новите обяви YSlow:

Марсел Duran За автора: Марсел Дюран е предната Водещ край за Yahoo! е изключителен екип Performance. Той е в изпълнение на оптимизация на уеб сайтове трафик в Yahoo! Front Page и екипи Търсене, където иска и изследвани уеб изпълнение на най-добрите практики за вземане на страници, дори по-бързо. Той е посветен на YSlow и други показатели инструменти за развитие, проучвания и евангелизъм. Неговата цел е да направи работата в интернет по-бързо, отколкото тя може да бъде и счита, че няма такова нещо като "само няколко милисекунди няма да боли".

Вижте разговори: Bloglines | Technorati

Споделете и разширяване : Запазете си отметка към del.icio.us | Digg тя | Reddit!

4 Коментари »

RSS емисия за коментари по тази публикация TrackBack URI

  1. Това определено може да използвате мобилния си стилове сега

    Коментар от Хуан - 19 юли, 2011 #

  2. Добри новини Марсел. Поддържайте добра работа!

    Коментар от Едуардо Лундгрен - 21 юли, 2011 #

  3. [...] Next-Gen YSlow захранва от Юи [...]

    Pingback от най-добрите практики за ускоряване на вашия уеб сайт «Chandara - 25 юли, 2011 #

  4. Аз не съм разработчик, но съм се интересуват в изпълнение App ÖVE WAN и Интернет. Аз го опитах за първи път и тя работи страхотно за мен. Благодаря за пускането на усилия в ...

    Коментар от Клиф Чапман - 27 юли, 2011 #

Оставете коментар

Забележка: Коментари са модерирани за първи таймери. Спам заличават.

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

Поместено от Yahoo!

Copyright © 2006-2012 Yahoo! Inc. Всички права запазени. Декларация за поверителност - Условия за ползване

Осъществено от WordPress на Yahoo! Уеб хостинг .