CSS-спрайты

[Vlad]

Сделал такой пример. Локально во всех браузерах всё работает хорошо, но на JSFeddle сердечко скачет. В чём может быть дело?

 

http://jsfiddle.net/webref/Lp9kzon3/

[Q4Dizzy]

А через что смотрите? с разных браузеров смотрю, не видно скачков..

[Vlad]

Хром 41 под Win8.

[Q4Dizzy]

Не заметил скачков в основных браузерах. 

 

P.S. Win7 (64)

[Vlad]

Спасибо, будем считать что это у меня браузер глючит.

[PavelTkachev]

А чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css файла с помощью gzip?

При использовании спрайта будет два обращения в серверу, а при кодировании внутри css - одно.

[Great Rash]

А чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css файла с помощью gzip?

Простотой реализации (не нужен сервер, не нужно ПО, которое будет перекодировать/пережимать в случае изменения CSS) + base64 не работает в старых браузерах (уж не знаю интересуют ли они). 

[SelenIT]

Сделал такой пример. Локально во всех браузерах всё работает хорошо, но на JSFeddle сердечко скачет. В чём может быть дело?

 

http://jsfiddle.net/webref/Lp9kzon3/

 

Может, дело в неродном браузерном масштабе? У меня на родном масштабе всё ОК, но при чуть уменьшенном масштабе в Хроме удалось поймать «рывки» (и, что хуже, полоски от соседних картинок). Но я бы на рывки забил — при неродном масштабе такие странности простительны. А вот от полосок надо бы добавить просвета между картинками, имхо.

 

 

 

чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css

 

Возможностью параллельной загрузки. Любые тяжелые ресурсы, внедренные прямо в файл, задерживают парсинг и отрисовку оставшейся его части, что особенно ощутимо на мобильных. А отдельный файл может грузиться параллельно в отдельном потоке. Поскольку у браузеров минимум 2 одновременных соединения на домен, два параллельных запроса оказываются быстрее одного очень долго обрабатываемого.

[Sergik+]

У спрайтов тоже полно проблем, инлайн svg самое то, но чтобы ваш html не превращался в кашу

придется освоить какой нибудь шаблонизатор (инклюдами будете svg вставлять).

[SelenIT]

инлайн svg самое то

А как же кеширование?

 

Имхо, нет серебряной пули, бывает оптимальное решение конкретной задачи...

[Sergik+]

 

инлайн svg самое то

А как же кеширование?

 

Имхо, нет серебряной пули, бывает оптимальное решение конкретной задачи...

 

К сожалению тоже пришел к такому выводу, везде есть проблемы небольшие.

[Great Rash]

А как же кеширование?

SVG можно кешировать в LocalStorage руками. Но я считаю это извращением конечно...

[SelenIT]

Всё равно, имхо, даже для этой извроптимизации лучше грузить исходный svg в параллельном потоке. AFAIK, часто его вообще сразу заворачивают в скрипт, которому можно поставить async/defer и всё прочее нужное...

[PavelTkachev]

AFAIK, часто его вообще сразу заворачивают в скрипт, которому можно поставить async/defer и всё прочее нужное...

 

Расскажите подробнее

[Sergik+]

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

[Great Rash]

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

Вы наверное про хайлоад никогда не слышали. Люди за каждый лишний байт борются.

[Sergik+]

 

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

Вы наверное про хайлоад никогда не слышали. Люди за каждый лишний байт борются.

 

Кучу конф пересмотрел, даже среди профи не все однозначно.

Например нужно ли собирать весь js и css в один файл или нет ?

С svg много играюсь последнее время и считаю что это одно из самых

некритичных мест в хайлоаде.

[Great Rash]

Вопрос: зачем качать что-то с сервера, если это можно хранить на клиенте?