Хабрахабр / Клиентская оптимизация / Захабренные http://habrahabr.ru/rss/blog/client_side_optimization/ ru editor@habrahabr.ru habrahabr.ru Fri, 10 Feb 2012 19:40:44 GMT http://habrahabr.ru/ http://habrahabr.ru/i/logo.gif Хабрахабр <![CDATA[Клиентская оптимизация / [Из песочницы] JavaScript. Оптимизация: опыт, проверенный временем]]> http://habrahabr.ru/blogs/client_side_optimization/137318/ http://habrahabr.ru/blogs/client_side_optimization/137318/ Предисловие
Давно хотел написать. Мысли есть, желание есть, времени нету… Но вот нашлось, так что привет, Хабра.
Здесь я собрал все идеи, которые помогали и помогают в разработке веб-приложений. Для удобства я разбил их на группы:
  1. Память
  2. Оптимизация операций
  3. Выделение критических участков
  4. Циклы и объектные свойства
  5. Немножко о DOM
  6. DocumentFragment как промежуточный буфер
  7. О преобразованиях в объекты
  8. Разбитие кода
  9. События перетаскивания
  10. Другие советы

Сейчас речь не пойдёт ни о каких библиотеках. Я постараюсь передать знания о механизмах самого языка, а не их реализациях в библиотеках.

Память

Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
Чтобы уменьшить расход памяти, я предлагаю несколько способов:
Читать дальше →
]]> Mon, 30 Jan 2012 20:24:03 GMT pashak javascriptclient side optimizationоптимизация кодасоветыразработка <![CDATA[Клиентская оптимизация / Топ-10 советов о том, как увеличить скорость загрузки страницы]]> http://habrahabr.ru/blogs/client_side_optimization/137239/ http://habrahabr.ru/blogs/client_side_optimization/137239/
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
Читать дальше →
]]> Sun, 29 Jan 2012 16:18:03 GMT ishamshur скорость загрузки страницыклиентская оптимизация <![CDATA[Клиентская оптимизация / Image Catalyst 2.1]]> http://habrahabr.ru/blogs/client_side_optimization/135109/ http://habrahabr.ru/blogs/client_side_optimization/135109/
image

После нескольких месяцев работы над исправлением ошибок и добавлением новых функции на суд общественности выношу новую версию Image Catalyst 2.1. В новой версии были сделаны ряд ключевых изменений.
Читать дальше →
]]> Tue, 27 Dec 2011 16:04:10 GMT Lorents pngjpeg <![CDATA[Клиентская оптимизация / Оптимизация PNG и JPEG без потери качества. Часть 2]]> http://habrahabr.ru/blogs/client_side_optimization/121096/ http://habrahabr.ru/blogs/client_side_optimization/121096/ Вот и настало время второй, и, надеюсь, долгожданной части. Настоятель рекомендую ознакомится с первой частью, ибо без этого будет тяжело понять, о чем я буду писать. В этой части я отойду от теории к практике, а именно покажу небольшое проект для комплексной оптимизации изображений.
Читать дальше →
]]> Sat, 27 Aug 2011 15:00:48 GMT Lorents pngjpeg <![CDATA[Клиентская оптимизация / Оптимизация скорости мобильных сайтов]]> http://habrahabr.ru/blogs/client_side_optimization/124203/ http://habrahabr.ru/blogs/client_side_optimization/124203/
Мобильные устройства унаследовали проблемы “больших” машин: от количества http-запросов до эффективности работы JavaScript.

Особенности мобильных устройств


Кроме того, что они часто помещаются в карман и их легче потерять, существует несколько ключевых отличий мобильных устройств по отношению к десктопам:
  • маленькое разрешение экрана;
  • медленные соединения;
  • ограниченный размер кэша;
  • много различных устройств и форм-факторов;
  • низкая мощность процессоров;
  • широкая поддержка HTML5;
  • относительно новые браузеры (в этом мире не знают о IE6).

Читать дальше →
]]> Fri, 15 Jul 2011 06:16:23 GMT aaliaksandr web performanceклиентская оптимизацияпроизводительностьмобильные устройстваwebdevскорость загрузки страницымобильные сайты <![CDATA[Клиентская оптимизация / [Из песочницы] Оптимизация PNG и JPEG без потери качества. Часть 1]]> http://habrahabr.ru/blogs/client_side_optimization/119009/ http://habrahabr.ru/blogs/client_side_optimization/119009/ Введение
Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.
Читать дальше →
]]> Tue, 10 May 2011 13:53:40 GMT Lorents pngjpeg <![CDATA[Клиентская оптимизация / Храните мелкие картинки в CSS]]> http://habrahabr.ru/blogs/client_side_optimization/116538/ http://habrahabr.ru/blogs/client_side_optimization/116538/
Читать дальше →
]]> Thu, 31 Mar 2011 09:05:15 GMT coon88 htmlcsstips and tricksтрюкbase64data:imageоптимизация сайтаспрайтыcss спрайтыsprites <![CDATA[Клиентская оптимизация / [Из песочницы] CSS спрайты из командной строки]]> http://habrahabr.ru/blogs/client_side_optimization/110002/ http://habrahabr.ru/blogs/client_side_optimization/110002/ сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки


Начнем с того, что у нас есть список отдельных файлов:
$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

  • — 1.png
  • — 2.gif
  • — dot.png
  • — phoney.gif
  • — tw.gif

Сделаем из них спрайт:
$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Читать дальше →
]]> Sat, 12 Mar 2011 13:10:59 GMT bekbulatov imagemagickspritesспрайтыsmush.it <![CDATA[Клиентская оптимизация / Клиентская оптимизация как сервис]]> http://habrahabr.ru/blogs/client_side_optimization/94109/ http://habrahabr.ru/blogs/client_side_optimization/94109/ Еще с самого начала своей деятельности как web-разработчика я мечтал иметь инструмент, который позволял бы автоматически получать оптимизированую версию моего сайта или веб-приложения. В прошлом оптимизация сводилась к ручному формированию обычных спрайтов, потом к сжиманию скриптов и стилей по отдельности. При внесении каких либо изменений геморрой частично повторялся заново. Благодаря новому сервису клиентской оптимизации теперь это в прошлом.
Читать дальше →
]]> Thu, 20 May 2010 15:24:18 GMT heruvim клиентская оптимизацияcss spritesdata:uriоптимизация сайтаwebdev <![CDATA[Клиентская оптимизация / Правильное REST кэширование]]> http://habrahabr.ru/blogs/client_side_optimization/90481/ http://habrahabr.ru/blogs/client_side_optimization/90481/ 1. собственно текст статьи. меняется очень редко.
2. дерево комментариев. меняется относительно часто, но со временем всё реже и реже.
3. прямой эфир. небольшой, но меняется очень часто.

Допустим, что страница с этой статьёй доступна по адресу ?article:right.cache
Но внутрь неё мы не будем помещать никакого контента, а вынесем его в отдельные ресурсы, как это обычно делается со скриптами и стилями. Внутри ?article:right.cache будет лишь индекс подключаемых ресурсов с версиями.

?article:right.cache/content/version:123
?article:right.cache/comments/time:2010-12-01
?live/time:2010-12-01
?style:article/version:666
?script:article/version:333

Указание версии позволяет задать для ресурсов жёсткое кэширование. А для индексного файла, наоборот, зададим необходимость проверять при каждом запросе изменился ли он.

Такая организация гарантирует нам, что при появлении новых комментариев не придётся грузить статью заново. И наоборот, при изменении статьи не надо будет перегружать всё дерево комментариев. А уж про то, что из-за часто меняющегося прямого эфира нам не надо по новой грузить весь контент, и заикаться не стоит ;-)

Важно, чтобы поисковики видели ссылки на ресурсы и могли их проиндексировать. Однако, из поиска люди будут приходить на конкретный ресурс и даже на конкретную его версию. Соответственно, ресурс должен определять загружен ли он по прямой ссылке и если это так, то после загрузки клиентскими средствами редиректить на индекс. Если актуальная версия ресурса не изменилась, то он потом будет взят из кэша. Если же изменилась — будет загружена новая версия. Не такая уж страшная беда, на самом деле ;-)

Реализации с использованием фреймов и аякса довольно банальны, так что воспользуемся хтмл-инклудами.
Читать дальше →
]]> Fri, 09 Apr 2010 08:40:25 GMT tenshi xmlxsltxhtml 2.0htmlклиентское кэшированиеrestinclude <![CDATA[Клиентская оптимизация / Доклад на openwebcamp kiev 2010 по клиентской оптимизации]]> http://habrahabr.ru/blogs/client_side_optimization/88316/ http://habrahabr.ru/blogs/client_side_optimization/88316/
Основные принципы:
Делать меньше HTTP запросов к серверу
CSS файлы подключаем в head
Скрипты загружаем перед и перед счетчиками и дургими внешними «медленными» или непрогнозируемыми вещами
Убираем inline стили, блоки кода с HTML шаблонов. Все грузим с кешируемых внешних файлов.
Переносим файлы CSS Javascript графику на cookie-free домен
Избегаем CSS Expressions
Expires заголовки, настраиваем нужное кеширование
GZIP для HTML CSS Javascript файлов
Уменьшаем кол-во используемых DNS имен
Сжимаем HTML CSS Javascript
Избегаем редиректов
Читать дальше →
]]> Sun, 21 Mar 2010 00:52:52 GMT vtx htmlверсткаcssоптимизация сайта <![CDATA[Клиентская оптимизация / Увеличиваем скорость загрузки сайта используя lazy-load изображений]]> http://habrahabr.ru/blogs/client_side_optimization/87083/ http://habrahabr.ru/blogs/client_side_optimization/87083/
Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.

Количество обращений к серверу можно легко уменьшить с помощью техники пост загрузки изображений, которые не попадают в область видимости(первый экран). Т.е изначально будут загружаться только те изображения которые пользователь способен увидеть, остальные будут загружаться по мере скролинга страницы.

Читать дальше →
]]> Wed, 10 Mar 2010 20:47:01 GMT ivv YUIjqueryprototypeperformance <![CDATA[Клиентская оптимизация / Проблемы сжатия и объединения Javascript]]> http://habrahabr.ru/blogs/client_side_optimization/86443/ http://habrahabr.ru/blogs/client_side_optimization/86443/ сжатие текстовых файловПосле публикации ряда заметок на тему сжатия и объединения JavaScirpt-файлов стоит все же осветить наиболее характерные проблемы этого самого сжатия и объединения.

Начнем с простого: как JS-сжатие способно испортить нам настроение. И как его поднять обратно :)

UPD стартовал конкурс ускорения сайтов. В призах: монитор, веб-камера, мышь. Все гипер-быстрое.
Читать дальше →
]]> Fri, 05 Mar 2010 00:38:24 GMT sunnybear клиентская оптимизацияскорость загрузкиобъединение js файловминимизацияпроблемы <![CDATA[Клиентская оптимизация / Минимизация Javascript кода и CSS с помощью Microsoft Ajax Minifier]]> http://habrahabr.ru/blogs/client_side_optimization/86067/ http://habrahabr.ru/blogs/client_side_optimization/86067/
Один из способов борьбы с лишними байтами – сжатие данных на сервере и передача gzip'ированного потока браузеру, который уже распаковывает его во время отрисовки страницы. Обсуждение данного способа не входит в данную статью. Я бы хотел рассказать о способе уменьшения данных с помощью удаления всех незначащих символов из сопутствующих веб-странице файлов: Javascript и CSS – минимизации.
Далее
]]> Tue, 02 Mar 2010 12:01:04 GMT sindilevich javascriptminifiermicrosoft <![CDATA[Клиентская оптимизация / Bundler: клиентская оптимизация Javascript в ASP.NET]]> http://habrahabr.ru/blogs/client_side_optimization/84255/ http://habrahabr.ru/blogs/client_side_optimization/84255/ Сегодня, при разработке приложений в интернете, вопрос клиентской оптимизации встает все чаще. Если раньше, страница отправленная клиенту содержала только информацию, то сегодня очень часто такая страница содержит много Javascript-кода. Для достижения наилучшей производительности и снижения нагрузки на сервер применяются правила клиентской оптимизации.

В этой статье речь пойдет про Bundler — удобное средство клиентской оптимизации Javascript для .net-проектов.
Читать дальше →
]]> Mon, 15 Feb 2010 06:24:45 GMT XaocCPS asp.netjavascriptbundler <![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[Клиентская оптимизация / 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[Клиентская оптимизация / Небольшая обертка для нескольких блоков Яндекс-Директа на странице c «отложенной» загрузкой]]> http://habrahabr.ru/blogs/client_side_optimization/77347/ http://habrahabr.ru/blogs/client_side_optimization/77347/
document.write("<script>”);


в любом месте страницы, что при отсутствии ответа от сервера — приводит к блокировке HTML-парсера и “зависанию” страницы.

Сам Яндекс предлагает бороться с этой проблемой следующим образом, однако, как-то не уверенно ;-) — о возможности создания такого подключения можно узнать только из FAQ, а не из самого интерфейса системы при создании и подключении блоков.

Все здорово, правда в случае, если на сайте несколько блоков Директа — становится немного неудобно.

Сегодня я написал небольшую “оберточку”, которая может кому-нибудь пригодится
Читать дальше →
]]> Sat, 05 Dec 2009 02:58:17 GMT MichaelXIII яндекс.директоптимизацияРСЯяндекс.маркет