Хабрахабр: коллективные http://habrahabr.ru/rss/blogs/client_side_optimization/ ru editor@habrahabr.ru habrahabr.ru Tue, 09 Feb 2010 17:49:43 GMT http://habrahabr.ru/ http://habrahabr.ru/i/logo.gif Хабрахабр <![CDATA[Клиентская оптимизация / [Перевод] Загрузка скриптов браузерами: вести с полей]]> http://habrahabr.ru/blogs/client_side_optimization/83370/ http://habrahabr.ru/blogs/client_side_optimization/83370/ Как справляются браузеры с параллельной загрузкой скриптов?

Во времена IE7 и Firefox 2.0 ни один браузер не загружал скрипты параллельно с другими ресурсами. Вместо этого старые браузеры блокировали все последующие запросы до полной загрузки, парсинга и выполнения скрипта. Вот так выглядел лог HTTP-запросов при подобной блокировке в старых браузерах:

HTTP-запросы

На тестовой странице, по которой была сгенерирована данная диаграмма, есть шесть HTTP-запросов:
  • HTML-документ;
  • первый скрипт — 2 секунды на скачивание, 2 секунды на выполнение;
  • второй скрипт — 2 секунды на скачивание, 2 секунды на выполнение;
  • картинка — 1 секунда на скачивание;
  • стилевой файл — 1 секунда на скачивание;
  • iframe — 1 секунда на скачивание.

На диаграмме видно, как скрипты блокируют друг друга, а также картинку, стилевой файл и iframe. Последние загружаются параллельно друг другу, но только после того, как завершена последовательная загрузка скриптов.

Читать дальше →
]]> Tue, 09 Feb 2010 10:36:00 GMT razetdinov chromefirefoxinternet exploreroperasafariбраузерызагрузкаоптимизацияскрипты <![CDATA[Клиентская оптимизация / [Ссылка] Рендеринг: отрисовка, перерасчет дерева / макета, стилизация]]> http://habrahabr.ru/blogs/client_side_optimization/79760/ http://habrahabr.ru/blogs/client_side_optimization/79760/ Wed, 30 Dec 2009 22:01:05 GMT sunnybear клиентская оптимизацияпроизводительностьreflowrepaintперерисовкадерево отрисовки <![CDATA[Клиентская оптимизация / data:URI и производительность, или как замедлить Firefox в 10 (десять) раз]]> http://habrahabr.ru/blogs/client_side_optimization/79262/ http://habrahabr.ru/blogs/client_side_optimization/79262/ Собственно, из заголовка должно быть почти все понятно. Но картинка не очень в тему: на ней надо нарисовать Лису, ползущую вслед догоняющему IE.

Это пост является ответом на «За бугром», ибо нашлась пара свободных часов, и было, чем их занять.

UPD Был обнаружен плагин — Wappalyzer — который на порядок замедлял отображение data:URI в Firefox. Но даже с его отключением Firefox продолжает проигрывать почти всем браузерам.

Но все по порядку.
Читать дальше →
]]> Fri, 25 Dec 2009 03:02:59 GMT sunnybear клиентская оптимизацияdata:URImhtmlCSS Spritesfirefoxiechromeopera <![CDATA[Клиентская оптимизация / «За бугром» все больше интересуются техникой Data:URI CSS Sprites]]> http://habrahabr.ru/blogs/client_side_optimization/78120/ http://habrahabr.ru/blogs/client_side_optimization/78120/
Многим уже известна техника оптимизации сайтов на основе data:uri технологии. Последнее время все больше и больше к относительно новой технологии проявляется интерес мирового сообщества разработчиков. В интернете можно найти уже достаточно много статей на эту тему. Радует, что одним из первых, кто задумался серьезно о разработке кросс-браузерного data:uri это «наш человек» — Евгений Степанищев aka bolk. Ну так вот, речь не об этом, это так для истории…

Наткнулся мне «забугорный» блог www.ravelrumba.com, автор которого последнее время активно занимается исследованием эффективности data:uri css sprites. О чем свидетельствует ряд интересных статей о его работе.
CSS Images and Data URIs
Data URIs for CSS Images: More Tests, More Questions

Я решил поддержать его и провел анализ скорости загрузки разработанных им тестовых страниц.
Результаты в картинках
]]> Sun, 13 Dec 2009 11:37:46 GMT sirus клиентская оптимизацияdata:uricssspritesweb-разработкаoptimization <![CDATA[Клиентская оптимизация / Производительность flash-баннеров]]> http://habrahabr.ru/blogs/client_side_optimization/77535/ http://habrahabr.ru/blogs/client_side_optimization/77535/ Частяком, когда я работаю с множеством сайтов, какая-нибудь самая наглая страничка отнимает слишком много процессорного времени, из-за чего система неприятно подтормаживает. Чаще всего оказывается, что виновник — это какой-нибудь хитрый баннер на Flash или совершенно бесполезная приблуда на Javascript, выполняющаяся в фоне.
Читать дальше →
]]> Mon, 07 Dec 2009 18:43:01 GMT VEG производительностьflashбаннеры <![CDATA[Клиентская оптимизация / ETag спешит на помощь]]> http://habrahabr.ru/blogs/client_side_optimization/77004/ http://habrahabr.ru/blogs/client_side_optimization/77004/ спецификации протокола). Призваны они ускорить процесс получения контента с сервера, а точнее избавить клиента от загрузки данных, которые не были изменены с момента предыдущего запроса.

Так вот. Для меня факт существования двух, по-сути одинаковых, механизмов сообщить клиенту изменилось ли содержимое страницы или нет немного настораживал. Немного. Точнее я его не понимал для чего нужен ETag, если мне всегда было достаточно одного Last-Modified и юзкейса для другого я даже и представить не мог (хотя меня этот вопрос, признаться честно, не особо и волновал).
Читать дальше →
]]> Wed, 02 Dec 2009 07:53:45 GMT pashka_r httpetagкеширование <![CDATA[Клиентская оптимизация / «Свежачок» по оптимизации — поведение браузеров при использовании Data:URI CSS Sprites]]> http://habrahabr.ru/blogs/client_side_optimization/76881/ http://habrahabr.ru/blogs/client_side_optimization/76881/
Последнее время в инете стало появляться все больше публикаций про использование data:uri css sprites. Приведу две ссылки из блога Steve Souders, известный всему миру «оптимизатор» работающий в Google.

CSSEmbed — automatically data: URI-ize
Aptimize: realtime spriting and more

Наш отечественный герой «веб-оптимайзер» sunnybear намного раньше поднимал вопрос про использование data:uri в css и нами совместно был проведен ряд исследований. В то время вылезло много интересных моментов и особенностей о которых мы писали в предыдущих статьях. Последние эксперименты вскрыли ряд ранее неизвестных моментов по работе браузеров с data uri css спрайтами.
Читать дальше →
]]> Tue, 01 Dec 2009 09:39:30 GMT sirus data:uricssклиентская оптимизацияweb-разработка <![CDATA[Клиентская оптимизация / Ускорение загрузки AJAX приложения, + предзагрузка изображений]]> http://habrahabr.ru/blogs/client_side_optimization/72151/ http://habrahabr.ru/blogs/client_side_optimization/72151/
Но статья не об этом. Требовалось решить скромную, но очень интересную задачу, — не осилив всю технологичность, продуманность и совершенство решений на базе платформы java, снизить время загрузки клиентской части приложения.

Входные данные: размер текстовых данных js, css, xml, html, images коло ~1,2MБ(+ флэш), время загрузки в Москве более полутора минут, при хождении по ссылкам заметное время(1-15 секунд) на загрузку картинок, при повторном обращении картинка загружалась повторно.
Читать дальше →
]]> Tue, 13 Oct 2009 08:04:02 GMT opeg ajaxpreloaderоптимизацияoptimizationweb optimizer <![CDATA[Клиентская оптимизация / [Ссылка] Быстрый сайт — это больше, чем хороший сайт]]> http://habrahabr.ru/blogs/client_side_optimization/71290/ http://habrahabr.ru/blogs/client_side_optimization/71290/ "Быстрые сайты кажутся пользователям более качественными и красивыми (это подтверждено многочисленными исследованиями). Пользователи склонны больше доверять быстрому интернет-магазину (впечатление от скорости работы сайта будет распространяться и на мнение о скорости, например, доставки или ответа на запросы)."]]> Fri, 02 Oct 2009 09:14:31 GMT sunnybear скорость загрузкипроизводительностьклиентская оптимизацияинтернет-магазинэлектронная коммерцияконверсия <![CDATA[Клиентская оптимизация / [Ссылка] Как создавался SpriteMe]]> http://habrahabr.ru/blogs/client_side_optimization/70585/ http://habrahabr.ru/blogs/client_side_optimization/70585/ "У меня была замечательная идея для доклада на WordCamp в прошлом мае мне предстояло публично оптимизировать тему для WordPress. В ночь перед этим (чтобы не тормозить публично) я решил основательно подготовиться. Всего за 30 минут мне удалось сделать большинство действий по оптимизации производительности (кэширование и сжатие на уровне Apache, перемещение скриптов вниз, запуск из командной строки YUI Compressor и т.д.)."]]> Thu, 24 Sep 2009 22:31:03 GMT sunnybear производительностьклиентская оптимизацияскорость загрузкиcss spritesspriteme <![CDATA[Клиентская оптимизация / Data URI [CSS] Sprites 1.5 — уникальный автоматический генератор CSS спрайтов]]> http://habrahabr.ru/blogs/client_side_optimization/69528/ http://habrahabr.ru/blogs/client_side_optimization/69528/

Тем кто следит за статьями про клиентскую оптимизацию уже известен современный подход к созданию CSS спрайтов на базе data:uri технологии. Указанный подход имеет весомые достоинства:
  • абсолютная минимизация конектов к серверу за изображениями определенных в css — сделать еще меньше уже невозможно.
  • полная 100%-ая автоматизация процесса создания спрайтов независимо от свойств backgroud-position и background-repeat.
  • предзагрузка всех изображений определенных в css, которые необходимы для сайта.

Обновился сервис автогенерации
]]> Sun, 13 Sep 2009 22:49:09 GMT sirus cssclient side optimizationspritewebdevelopmentклиентская оптимизацияспрайтweb-разработка <![CDATA[Клиентская оптимизация / [Ссылка] Зачем нужен CDN?]]> http://habrahabr.ru/blogs/client_side_optimization/68820/ http://habrahabr.ru/blogs/client_side_optimization/68820/
"После общения с множеством специалистов возникла следующая проблема: все знают, что CDN — это очень хорошо, это правильно, это стоит использовать. Данная статья пытается ответить на этот вопрос и объяснить, в каких случаях CDN может решить возникающие проблемы и ряд технологических и бизнес-задач."]]> Sat, 05 Sep 2009 11:39:33 GMT sunnybear производительностьскорость загрузкиcdnngenix <![CDATA[Клиентская оптимизация / [Ссылка] Пишем эффективный CSS]]> http://habrahabr.ru/blogs/client_side_optimization/68132/ http://habrahabr.ru/blogs/client_side_optimization/68132/
"В книге "Разгони свой сайт" тема производительности CSS-селекторов уже поднималась. Хотя все выводы были подкреплены значительный объемом исследований, но основной вопрос — как же должна выглядеть эффективная таблица стилей, которая обеспечивает наискорейшее отображение документа на экране — так и остался без ответа."]]> Thu, 27 Aug 2009 13:12:16 GMT sunnybear производительностьклиентская оптимизацияскорость загрузкиcss-селекторыэффективность <![CDATA[Клиентская оптимизация / [Ссылка] Обзор технологий автоматической клиентской оптимизации]]> http://habrahabr.ru/blogs/client_side_optimization/67788/ http://habrahabr.ru/blogs/client_side_optimization/67788/
"На данный момент тематика автоматической клиентской оптимизации сильно волнует умы веб-программистов, предпринимателей и просто энтузиастов. Выгоды вполне очевидные: быстрые сайт имеет значительные преимущества перед медленными конкурентами. При наличии высокой конкуренции это может оказаться существенным. Более того пользователи не склонны ждать долго. Быстрая загрузка может являться ключом к процветанию интернет-направления целой компании."]]> Sun, 23 Aug 2009 13:17:57 GMT sunnybear клиентская оптимизацияскорость загрузкипроизводительностьjsmincss tidyyui compressorpackerweb optimizeraptimizewaominifysmart optimizerphp speedyqpimgsmart spritesspritemeавтоматизация <![CDATA[Клиентская оптимизация / Ищу партнера]]> http://habrahabr.ru/blogs/client_side_optimization/67485/ http://habrahabr.ru/blogs/client_side_optimization/67485/
Собственно, о чем это я? О том, что хочу пригласить в свою команду (занимающуюся уже несколько лет вопросами производительности) не просто оптимизатора, а настоящего партнера, который был бы готов разделить объем как прав, так и обязанностей.

Кого я вижу в качестве партнера?

Читать дальше →
]]> Wed, 19 Aug 2009 17:57:48 GMT sunnybear клиентская оптимизацияскорость загрузкипартнерство <![CDATA[Клиентская оптимизация / [Ссылка] Вычисляем при помощи Web Workers]]> http://habrahabr.ru/blogs/client_side_optimization/67426/ http://habrahabr.ru/blogs/client_side_optimization/67426/ Wed, 19 Aug 2009 06:54:20 GMT sunnybear клиентская оптимизацияпроизводительностьjavascriptweb workersскорость загрузки <![CDATA[Клиентская оптимизация / [Ссылка] Перезагружаем XHR-запросы]]> http://habrahabr.ru/blogs/client_side_optimization/66924/ http://habrahabr.ru/blogs/client_side_optimization/66924/ Wed, 12 Aug 2009 16:36:28 GMT sunnybear скорость загрузкиклиентская оптимизацияXHRкэширование запросов <![CDATA[Клиентская оптимизация / [Ссылка] Canvas: один шаг назад, два шага вперед]]> http://habrahabr.ru/blogs/client_side_optimization/64187/ http://habrahabr.ru/blogs/client_side_optimization/64187/
"Спецификация Canvas (как отдельной области на странице, внутри которой можно отображать графические объекты) в 2005 году изначально была предложена со стороны Apple для поддержки некоторых приложений внутри движка WebKit (на данный момент его используют браузеры Safari и Chrome). Рабочая группа W3C включила Canvas в Web Applications 1.0, который вошел в готовящийся стандарт HTML 5.0."]]> Sat, 11 Jul 2009 13:37:58 GMT sunnybear производительностьскорость загрузкиклиентская оптимизацияcanvassvgvmlpgml <![CDATA[Клиентская оптимизация / [Ссылка] Автоматизация кэширования]]> http://habrahabr.ru/blogs/client_side_optimization/63733/ http://habrahabr.ru/blogs/client_side_optimization/63733/
"Кэширование на клиентском и серверном уровне может значительно ускорить скорость работы сайта. На данный момент все современные системы управления сайтом включают поддержку кэширования, в некоторых случаях даже многоуровневого."]]> Tue, 07 Jul 2009 05:04:22 GMT sunnybear клиентская оптимизацияскорость загрузкипроизводительностькэшированиеавтоматизация <![CDATA[Клиентская оптимизация / [Ссылка] API для DOM-селекторов в Firefox 3.5]]> http://habrahabr.ru/blogs/client_side_optimization/63719/ http://habrahabr.ru/blogs/client_side_optimization/63719/
"Предварительная версия документа API для селекторов, опубликованная консорциумом W3C представляет собой относительно новый взгляд для Javascript-разработчиков, как можно выбирать DOM-элементы на страницы при помощи CSS-селекторов. В одном этом документе собраны все тонкости такого сложного процесса, как поиск, выборка элементов из DOM-дерева и представление результата, доступного по упорядоченному интерфейсу."]]> Mon, 06 Jul 2009 19:36:21 GMT sunnybear клиентская оптимизацияпроизводительностьскорость загрузкиAPI для селекторовjohn resigcss-селекторы