Yahoo! User Interface блог (YUIBlog)

Screencast: YUI Bundle Росс Harmes для Textmate

30 ноября 2006 в 5:27 вечера Эрик Miraglia | В развитие , Юй Театр | 14 Комментариев

Продолжить чтение Screencast: YUI Bundle Росс Harmes для Textmate ...

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

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

Performance Research, Part 1: То, что правило 80/20 говорит нам о Сокращение HTTP-запросов

28 ноября 2006 в 12:56 вечера по Tenni Тойрер | В развитии , производительность | 128 комментариев

Ни для кого не секрет, что пользователи предпочитают быстрый веб-сайтов. Я работаю в специальной группы сосредоточена на количественных и повышения производительности продуктов Yahoo! по всему миру. Как часть нашей работы, мы проводим эксперименты, связанные с веб-производительности страницы. Мы делимся нашим данным, чтобы другие интерфейсные инженеров присоединиться к нам в ускорении работы пользователей в Интернете.

80/20 Производительность правила

Вильфредо Парето, экономист в начале 1900-х годов, сделал известное наблюдение, где 80% национального богатства принадлежали 20% населения. Это было позже обобщенные в то, что обычно называют принципом Парето (также известный как правило 80-20), в котором говорится, для любого явления, в 80% от последствий из 20% причин. Мы видим это явление в области программной инженерии, где 80% времени уходит только в 20% кода. Когда мы оптимизируем наши приложения, мы знаем, чтобы сосредоточиться на том, что 20% кода. Этот же метод следует также применять при оптимизации веб-страниц. Большинство оптимизации сегодня изготавливаются на части, которые генерируют HTML-документа (например, Apache, C + +, базы данных и т.д.), но эти части только способствовать около 20% времени отклика пользователя. Лучше сосредоточиться на оптимизации частей, которые вносят вклад в остальных 80%.

Используя анализатор пакетов, мы обнаруживаем, что происходит в том, что остальные 80%. На рисунке 1 в графическом виде, где время проводится загрузка http://www.yahoo.com с пустым кэшем. Каждая панель представляет определенный компонент и отображается в порядке, созданные браузера. Первый бар времени для браузера извлечь только HTML документа. Обратите внимание, только 10% времени тратится здесь для браузера просить HTML страницы, а для Apache, чтобы сшить вместе HTML и возвращает ответ обратно в браузер. Остальные 90% времени уходит на извлечение других компонентов страницы, включая изображения, скрипты и стили.

В таблице 1 приведены популярные веб-сайты тратить от 5% до 38% времени загрузки HTML документа. Другие 62% до 95% времени тратится на создание HTTP-запросы для извлечения всех компонентов в этом документе HTML (например, изображений, сценариев и стилей). Влияние наличия многих компонентов на странице усугубляется тем, что браузеры скачать только два или четыре компонента параллельно на имя хоста, в зависимости от версии HTTP отклика и браузер пользователя. Наш опыт показывает, что уменьшение числа запросов HTTP, имеет наибольшее влияние на снижение времени отклика и зачастую является самым простым повышения производительности сделать.

Не должно все быть сохранены в кэше браузера, так или иначе?

Вывод тот же: сокращение числа запросов HTTP, имеет наибольшее влияние на снижение времени отклика и зачастую является самым простым повышения производительности сделать. В следующей статье мы рассмотрим влияние кэширования и некоторые удивительные реальные результаты.

Отказ от ответственности: дизайн императивы диктует визуальное богатство необходимо сопоставлять с этой просьбой снижения цели. При необходимости визуального богатства, дополнительные шаги могут быть предприняты - объединения JS файлы, используя CSS спрайты и т.д. - но визуальное богатство имеет тенденцию противоречить стройный конвейер обработки запросов HTTP.

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

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

Видео: Дуглас Crockford «Расширенные JavaScript"

27 ноября 2006 в 10:59 Эрик Miraglia | В развитие , Юй Театр | 34 Комментарии

В прошлом месяце я опубликовал несколько видео, снятого с одного из Дуглас Крокфорда презентации интерфейс техники ( Видео: Дуглас Crockford "Неудобная API: Теория Дом" ). Те, кто пользовался глубоким погружением Дугласа в DOM могут быть заинтересованы также в его "Advanced JavaScript" представление, в настоящее время публично доступны на сайте Yahoo! Video. В этой презентации - третий из трех частей серии, он преподает в Yahoo! - Дуглас смотрит внимательно на код модели, из которых JavaScript программисты могут выбрать в авторской их применения. Он сравнивает знакомые конструкции, как Псевдоклассическое шаблонов с большим количеством уникальных моделей, как паразитические, что шаблон (он утверждает) работать более "с зерном" в JavaScript. Когда Брендан Eich выступил на Yahoo этим летом он описал, как Дуглас "Йода лямбда-программирование и JavaScript», после просмотра «Расширенный JavaScript", вы можете иметь четкое представление о том, где это чувство приходит.

Это стоит повторить, что идеи Дугласа и перспективы его собственные, и что многие недостатки в видеографическая мастерство мои.

• Смотреть на YouTube
• Часть 1: 31 минут
• Часть 2: 25 минут
• Часть 3: 11 минут
• Скачать слайды (zip файл PowerPoint)

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

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

Градуированные Поддержка браузеров: Q4 обновление

15 ноября 2006 года в 1:42 утра по Nate Koechley | В развитие | 17 Комментариев

Примерно раз в три месяца мы обновляем график подробно, какие браузеры получают класса поддержки в соответствии с Градуированные Поддержка браузера . В связи с вчерашним YUI выпуском обновлений , вот наш браузер поддержку обновлений для 4-м квартале 2006 года.

В итоге: A-класса начинается поддержки для Firefox 2.0, и вновь для IE7. А-класс поддержка прекращена IE 5.5 и Firefox 1.0. Редко используемые Gecko производные (например, Netscape и Mozilla приложений) в настоящее время получают X-класса, а класса поддержки. Opera 9 теперь получает класса поддержки дополнительных платформ.

В пуля форме, здесь все изменения в этом обновлении:

1. Повторение-класс поддержки, IE 7, Windows (XP)
2. Прекращение-класс поддержки, IE5.5, Win
3. Начало класса поддержки, Firefox 2.x, Win / Mac.
4. Прекращение класса поддержки, Firefox 1.0.x, Win / Mac.
5. Расширение класса поддержки, Opera 9.x, Win / Mac
6. Прекращение класса поддержки, Mozilla App Suite, Win / Mac
7. Прекращение класса поддержки, Netscape, Win / Mac

Хотя вы всегда должны ссылаться на официальном чарте СГБ состоялось в сети разработчиков Yahoo! , я включил снимок график этого квартала ради потомства:

	Win 98	Win 2000	Win XP	Mac 10.3.x	Mac 10.4
IE 7.0			А-класс
IE 6.0	А-класс	А-класс	А-класс
Firefox 2.0 *.	А-класс	А-класс	А-класс	А-класс	А-класс
Firefox 1.5 *.	А-класс	А-класс	А-класс	А-класс	А-класс
Opera 9 *.	А-класс	А-класс	А-класс	А-класс	А-класс
Safari 2.0 *					А-класс

В преддверии следующего квартала (2007Q1), мы будем отражать дополнительные релизы поддерживаемых браузеров, но никаких серьезных изменений не предвидится.

Спасибо,
Nate

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

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

YUI версии 0.12.0: TabView управления, улучшенная документация API и многое другое

13 ноября 2006 в 6:35 вечера Эрик Miraglia | В развитие | 23 Комментариев

Сегодня мы выпустили версию 0.12 библиотеки YUI. Вот основные моменты:

• Управление TabView : Автор Юй анимации и дом Автор Matt Sweeney , это динамическое решение закладка новейшей YUI того и имеет надежную поддержку как для прогрессивного улучшения и глянцевый богатство. Проверьте список Мэтта примеры TabView за идею о том, что новый элемент управления может сделать; просмотреть исходный код на примерах увидеть, как они реализованы.
• Улучшенная документация: YUI разработчик Адам Мур ( событие , Drag & падение , Slider , TreeView ) создала новый инструмент для создания документации API , позволяющий создавать единый API сшитые документы со встроенным автозаполнение питанием управления поиском . Новые документы API предоставляют разработчикам более четкое представление о классовой структуре и обеспечить отдельный классификации свойств и параметров конфигурации. Вы никогда не можете вернуться к шпаргалки снова ...
• Но ... в случае, если Вы до сих пор нравится Шпаргалки: Шпаргалки обновления для версии 0.12 и включают в себя новые листы для TabView и CSS Nate Koechley на Reset , шрифты и сетки основания. Вы можете скачать все YUI Шпаргалки с веб-сайта библиотеки YUI.
• Говоря о CSS сетки: Нейт был rev'd Сетки пакет с запеченным в поддержку 750px, 950px, и полный просмотра ("жидкость"), макеты. Сетки 0,12 утраивает количество поддерживаемых схем и еще веса в соответствии 3KB до сжатия. Мы создали сайт Юй на Reset / Fonts / Сетки основу, и мы делаем использование использование новых просмотра полной поддержке.
• Улучшения по всей библиотеке: Есть усовершенствований можно найти по всей библиотеке, начиная с событий нового onContentReady метод значительно улучшить календарь управления с упрощенным интерфейсом для создания мульти-дисплеев календарный месяц (если вы обновляете предыдущую версию Календарь, проверить шаг за шагом руководство по обновлению ). Полный список изменений см. в документации по выпуску, которая сопровождает распределения.

Мы свяжемся с более подробной информацией по некоторым из этих тем в конце недели. На данный момент, пожалуйста, ваш путь к SourceForge , чтобы загрузить последнюю YUI распределения, см. примечания к выпуску в распределении для полного изменения проявляются во всей библиотеке. Как всегда, сайт YUI в сети разработчиков Yahoo! имеет все последние документы.

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

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

JavaScript, мы вряд ли new Я.

13 ноября 2006 в 9:21 Дуглас Crockford | В развитие | 54 Комментарии

JavaScript является прототипных язык, но у него есть new оператор, который пытается сделать его вроде как классический язык. Это имеет тенденцию путать программистов, ведущих к некоторые проблемные модели программирования.

Вам никогда не придется использовать new Object() в JavaScript. Использование объекта буквальном {} вместо этого. Кроме того, не используйте new Array() , используя литерал массива [] вместо. Массивы в JavaScript работа не похожа на массивы в Java, и использование Java-подобный синтаксис будет сбить вас с толку.

Не используйте new Number , new String или new Boolean . Эти формы производят ненужные обертки объекта. Просто используйте простые литералы вместо.

Не используйте new Function для создания значений функции. Используйте функцию выражения вместо. Например,

  кадры [0]. onFocus, = новая функция ("document.bgColor = 'antiquewhite") 

лучше виде

  кадры [0] = OnFocus функция () {document.bgColor = 'antiquewhite';}. 

Вторая форма позволяет компилятору, чтобы увидеть тело функции рано, так что любые ошибки в нем будет обнаружен раньше. Иногда new Function используется людьми, которые не понимают, как внутренняя работа функции.

  selObj.onchange = новая функция ("dynamicOptionListObjects [" +
         dol.index + "] изменить (это)."); 

Если мы сохраним функции органов в строки, компилятор не может их видеть. Если мы сохраним функции органов, а строка выражения, мы не можем видеть их также. Лучше не программировать в неведении. Делая функция, которая возвращает функцию, мы можем точно передать ценности, которые мы хотим связать. Это позволяет инициализировать набор selObj в цикле.

  selObj.onchange = функция (я) {
     Функция возврата () {
         . dynamicOptionListObjects [я] изменения (это);

     };
 } (Dol.index); 

Это не очень хорошая идея поставить new непосредственно перед function . Например, new function не дает никаких преимуществ при строительстве новых объектов.

  MyObj = новая функция () {
     this.type = 'ядро';
 }; 

Лучше использовать литерал объекта. Это меньше, быстрее.

  MyObj = {
     типа: «основных»
 }; 

Если мы делаем объект, содержащий методы, которые связаны с локальными переменными и функциями, это все же лучше оставить на new префикс.

  VAR Еоо = новая функция () {
     Функция processMessages (сообщение) {
         Alert ("сообщение:" + message.content);
     }
     this.init = функция () {
         подписаться ("/ mytopic", это, processMessages);
     }
 } 

С помощью new для вызова функции, объект удерживает бесполезный prototype объекта. Это отходы памяти без компенсирующего преимущества. Если мы не будем использовать new , мы не держим впустую prototype объекта в цепочке. Таким образом, вместо мы будем ссылаться на заводе функции правильный путь, с помощью () .

  VAR Еоо = функция () {
     Функция processMessages (сообщение) {
         Alert ("сообщение:" + message.content);
     }
     {вернуться
         инициализации: функция () {
             подписаться ("/ mytopic", это, processMessages);
         }
     };
 } ();

Таким образом, правило простое: Единственный раз, когда мы должны использовать new оператор для вызова функции псевдоклассической конструктор. При вызове функции-конструктора, использование new , является обязательным.

Существует время для new , а время нет.

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

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