Next-Gen YSlow питанием от YUI

18 июля 2011 в 9:17 вечера Марсель Duran | В развитии , производительность | 4 комментария

Пару недель назад, Yahoo! объявила о YSlow для мобильных на скорости 2011 , в результате чего мощность анализа производительности YSlow в мобильном мире.

YSlow для мобильных работ, как закладка , позволяющая работать на браузерах, отличных от Firefox (как дополнение) и Chrome (как расширение) .

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

Песочница

Для того, чтобы быть внедрены на странице, не мешая анализ производительности и не возиться с самой страницы, YSlow является букмарклет, который вводит JavaScript и CSS в любую страницу, используя силу YUI песочницы:

Закладка URL: 

 JavaScript: (функция (у, р, о) {
     р = y.body.appendChild (y.createElement ("IFRAME '));
     p.id = 'YSlow, закладка';
     p.style.cssText = 'дисплей: нет;
     O = p.contentWindow.document;
     o.open (). write ('
         <head>
         <Тело OnLoad = "
             YUI_config = {
                 Победа: window.parent,
                 Doc: window.parent.document
             };
             VAR г = документа;
             d.getElementsByTagName (\ "голову \ ') [0]
                 . AppendChild (
                     d.createElement (\ 'скрипт \')
                 ). SRC = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \ "
         >
     ');
     o.close ()
 } (Документ))

Этот код:

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

* IFRAME отображается время все активы YSlow презентация загружается

Это позволит разместить IFRAME на странице анализируются. Это IFRAME будет выступать в качестве изолированной среды и YSlow будет находиться в ее пределах. С IFRAME создается динамически без src атрибут, он будет иметь доступ к своему родителю (страница анализируемого), потому что нет же политика происхождения нарушения, что там происходит.

YUI_config объект удобен, поскольку он устанавливает win и doc для родителей IFRAME (в анализируемой страницы), что любой новый экземпляр Юй будет привязан к основному документу по умолчанию, монтаж любой вызов Y.all и Y.one через Y.config.win или Y.config.doc из YUI use обратного вызова.

Презентация YSlow в обрабатывается IFRAME window и document ссылки, позволяющие YSlow основной сценарий, чтобы сделать разметку, а также получить внешний CSS в этом IFRAME не вступая в конфликт со стилями родительского страницы. YSlow просматривает родительскую страницу, чтобы получить все компоненты (картинки, скрипты, ссылки, фон, изображения, Flash и т.д.), необходимых для последующего анализа производительности. Это делается путем доступа к Y.config.win и Y.config.doc , так как они относятся к родительской страницы.

Кросс-браузер абстракция

Будучи инструментом, YSlow для мобильных должна работать в любом браузере *. YUI абстрагируется кросс-браузерный вопросов нормализации различий браузеров, в результате чего чистый, легкий для чтения и сопровождения кода.

YSlow не была полностью перенесена на YUI 3 - только на уровне контроллера (от предстоящего компонент App) на данный момент - но все же, все манипуляции с DOM и обработка событий выполняется на node и event модулей. В будущих версиях мы планируем переносить больше возможностей YSlow на YUI 3.

* Не все браузеры в настоящее время поддерживаются

YQL

YSlow анализирует страницы, проверяя заголовки HTTP для компонентов, найденных на странице. Заголовки HTTP-ответа не доступны на странице, следовательно, эти компоненты должны быть просили еще раз для того, чтобы YSlow получить информацию в заголовке ответа. Это может быть достигнуто путем запроса список компонентов адресов через XMLHttpRequest (AJAX), но к сожалению, из-за той же политики ограничения происхождения , это не возможно, если все компоненты находятся в том же домене, что и страница, которая является очень маловероятным.

Общее же обойти ограничения политики происхождения использованием JSONP, где внешний сервер работает как прокси-запроса списка адресов компоненты и извлечения их HTTP-заголовки ответа от имени YSlow. В связи с популярностью YSlow и последние мобильные усилия анализ производительности, мы ожидаем достаточно тяжелый трафик для YSlow для мобильных букмарклет. Для того, чтобы поддерживать такой трафик, YQL было масштабируемое решение, принятые YSlow через открытые данные таблицы имени data.headers , который получает ответ заголовков и содержимого для данного списка адресов в то время как олицетворение агента пользователя для обеспечения ожидаемого содержания получены.

YQL запросов компонента делает всю работу по управлению YQL запросов при управлении JSONP запросов под капотом, в результате чего код YSlow контроллер гораздо проще и простой в обслуживании.

Будущие усовершенствования: новые YSlow для мобильных дружественный интерфейс

В настоящее время YSlow для мобильных пользователей так же, как над рабочим столом. Работа с длинным списком данных, анализ производительности не самый лучший опыт на небольшой смартфон экранов. С Юй также тезисы разных устройствах жесты , YSlow для мобильных получит новый мобильный и удобный интерфейс в будущих версиях.

Производительность производительности инструмента

YSlow для развертывания мобильных был тщательно изучают его влияние на производительность время загрузки страницы анализируется. YUI 3 модулей используется на YSlow были тщательно изучены, чтобы включать только те модули, необходимые для загрузки YSlow как можно быстрее. Файл YUI семян и погрузчики не были включены , поскольку все необходимые модули и подмодули были объединены после Райан Гроува производительность Zen советов, что позволило загрузить все вместе в одном небольшом один запрос: YSlow-bookmarklet.js: 204KB, 66KB ( GZIP), где:

  • Юй: 75KB, 27KB (GZIP)
  • YSlow: 129Кб, 39KB (GZIP)

Подробнее о YSlow

Оставайтесь в курсе последних YSlow объявления по:

Марсель Duran Об авторе: Марсель Duran является фронта ведущий End для Yahoo! в исключительных Выступление команды. Он был в веб-оптимизации производительности на высоких участках движения в Yahoo! первой странице и поиска команд, где он применяется и исследуется производительность веб передового опыта делает страницы еще быстрее. В настоящее время он посвященная YSlow и другие производительности средства разработки, исследования и евангелизации. Его целью является сделать веб-даже быстрее, чем это может быть и считает, что нет такого понятия, как "всего лишь несколько миллисекунд, не повредит".

Найти разговоры: Bloglines | Technorati

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

4 Комментария »

RSS лента комментариев к этой записи. TrackBack URI

  1. Это определенно может использовать мобильный стиль сейчас

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

  2. Хорошие новости Марсель. Продолжайте в том же духе!

    Комментарий Эдуарда Лундгрена - 21 июля 2011 #

  3. [...] Next-Gen YSlow питанием от YUI [...]

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

  4. Я не разработчик, но я заинтересован в производительности приложений Ове WAN и Интернет. Я попробовал это в первый раз, и он работал большой для меня. Спасибо за поставив усилия в ...

    Комментарий от Cliff Чепмен - 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! Веб-хостинг .