- PVSM.RU - https://www.pvsm.ru -
Оптимизация web-приложения (страницы, ресурса, портала — далее для краткости просто — приложение) напрямую зависит от количества запросов к серверу. Есть замечательная презентация [1] по этой теме. В качестве оптимизации (уменьшения количества запросов к серверу) применяются спрайты с изображениями, т.е. группа изображений объединяется в одно — и после силами css показываются лишь отдельные его части. Это в свою очередь добавляет разработчику немало усилий — в том случае, если разработчик никогда не пользовался спрайтами, а только собирается на них переводить своё детище. В любом случае изображения, которые помещаются в спрайты, маловероятно, будут когда либо изменены — если конечно, не переделывать дизайн приложения вообще, т.е. не менять основной CSS-файл приложения. Но — зачем нам отдельный файл с изображениями, если можно использовать data URI?
<div>
с необходимой фоновой картинкой вместо изображения (вместо <img>
) <input type=image ... />
с прозрачной основой и фоновой картинкой вместо изображения Голая теория сама по себе ничего не значит — знаю теоретиков на Хабре и так хватает — по этому запилил две демки для ознакомления первая [2] использует вышепредложенную стратегию и вторая [3] её не использует (спрайты вторая тоже не использует).
По данным расширения для Chrome «Live HTTP Headers» по количеству запросов:
стратегия | первый запрос | второй запрос |
---|---|---|
не используется | 25 запросов | 24 запроса, 23 из которых 304* |
используется | 5 запросов | 4 запроса, 2 из которых 304* |
* — 304 Файл не изменён
Визуально работоспособность протестирована на Chrome 32.0.1700.107, FF 27.0, Opera 12.16 (на движке Presto).
— Руками? Нет-нет-нет-нет-нет...
Добавление хелперов и манипуляции со стилями требуют глубокого понимания фреймворка (в частности добавление хелперов для FormBuilder) — поэтому весь функционал я поместил в гем [4]
Этот подход (стратегия) хорош только для небольших и часто повторяющихся изображений, например тот же search.png скорее всего можно встретить на каждой странице приложения. Все необходимые изображения помещаются в отдельную папку app/assets/images/uri
(во избежании путаницы).
метод | эквивалент | итоговый html-тэг |
---|---|---|
uri_image |
image_tag |
<div> |
uri_submit_tag |
image_submit_tag |
<input type=image... /> |
uri_submit (для FormBuilder) |
submit type: 'image' |
<input type=image ... /> |
Использование
= helper_method_name 'uri/image_filename.ext', attrs
uri/image_filename.ext
— путь к файлу без использования image_path
или asset_path
attrs
— хэш с атрибутами html-тэга
Каждое внедрённое вышеупомянутыми методами изображение имеет два класса uri
и по шаблону uri_path_filename_ext
*.
.uri{
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* пример для файла app/assets/images/uri/edit/commit.png */
.uri_edit_commit_png{
background-image: url(data:image/png;base64,*** data uri хэш ***) !important;
}
* — на самом деле класс типа uri_path_filename_ext
генерируется для каждого изображения в папке app/assets/images/uri
не зависимо от того — будет оно использоваться или нет.
Важно понимать, что <div>
не будет вести себя как <img>
и ему в любом случае нужна ширина и высота — иначе его не будет видно. Поэтому необходимо добавить соответствующие стилевые свойства элементам, например так
/* эти свойства свои для каждого разработчика, поэтому не включены в стили добавляемые по-умолчанию */
.uri{
width: 7em;
height: 7em;
float: left;
padding: .8em;
}
Вот здесь [5] конфигурации Nginx и Apache добавляющие статике «вечный заголовок».
Помещённые в css изображения не исключаются из прекомпиляции — и соответственно, они будут лежать на сервере (занимать немножечко места) в папке public/assets/uri. Но с другой стороны — это может сыграть на руку — если Вы планируете поддерживать IE6-7 (и 8) или иным способом обращаться к оригиналам изображений. В конце концов исключить из прекомпиляции их можно — только ИМХО, не так уж много они весят, чтобы заморачиваться.
IE8 поддерживает data URI размером не более 32 kB.
IE8 не поддерживает используемое свойство background-size: contain;
, если размер фоновой картинки такой же как и размер элемента — то проблем не будет.
Демо 1 [2]
Демо 2 [3]
Гем [4]
Презентация о запросах [1]
Автор: deep_orange
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ruby-on-rails/56656
Ссылки в тексте:
[1] презентация: http://www.slideshare.net/yandex/ss-29106828
[2] первая: http://data-uri-images-on.herokuapp.com/
[3] вторая: http://data-uri-images-off.herokuapp.com/
[4] гем: http://github.com/logrusorgru/data_uri_images
[5] здесь: http://rusrails.ru/asset-pipeline#vechnyy-zagolovok-expires
[6] Источник: http://habrahabr.ru/post/214091/
Нажмите здесь для печати.