Сжимаем css алгоритмом base62

     Приветствую, мои уважаемые               читатели! Сегодня я расскажу вам сказку.. бррррр! Сегодня я опишу классный             способ сжать ваши css файлы ещё больше (помимо обычной обфускации и стирания лишнего). Сейчас я подробно расскажу о самом процессе. Он прост, но почему то нигде не используется, хотя и имеет потенциал.

      Итак, начнем. Для статьи я взял стили от стандартного дизайна номер 101. Вот они. В исходном состоянии файл стилей весит 15 килобайт.

Шаг первый

     Сначала, используя свой css компрессор я убрал из стилей все лишние символы, комментарии и так далее. В итоге у меня получился файл размером 12 килобайт.

Шаг второй

     Теперь я создаю js файл вот такого вида и вставляю в него полученные стили. Обратите внимание что все стили не должны содержать одиночных кавычек и должны быть в одну строку!

Code
document.write('<style type="text/css">/* а сюда вставляю стили (слеши и звездочки уберите - это просто комментарий) */</style>');
В итоге у нас получается скриптовый файл, который необходимо подключить в шапку сайта вместо обычного файла стилей. А теперь самое интересное...

Шаг третий

     Получившийся js код я сжимаю с помощью технологии base62. Для того чтобы это сделать, вставьте свой код в верхнее поле на этой странице: Packer, затем отметьте галочку Base62 encode и нажмите pack. Скопируйте полученный код из нижнего поля и вставьте его в ваш js файл вместо старого кода. В итоге этих действий у меня получился файл размером 8 килобайт. Как видите способ оправдывает себя - сжатие почти в 50% + возможность объединить js и css в один файл, что так же ускорит загрузку сайта (при условии что исходный файл не очень большой).

     Надеюсь статья вам пригодилась и вы сочли её интересной. При копировании статьи на сторонние ресурсы ссылка на http://studioad.ru обязательна.


Жми на пятую!
36, 25, 9883
№15
[sayto]WinuX[/sayto], вы забываете что есть пользователи с 20 мегабитным каналом, а есть с 30 килобитным. И для них скачивание будет длится гоораздо дольше чем распаковка.
№14
[sayto]Асман[/sayto], знаю. Я снял все счетчики юблогов - они вызывают ошибку в IE
№13
Имхо, 4 жалкие килобайта не стоят того чтобы так мучать браузер.
№12
[sayto]Иван0[/sayto], ничего, спасибо)
№11
Блин, не текст а шрифт (((
№10
Алеко, скажи текст, которым ты писал на картинке:"Сжимаем CSS с помощью Base62" плз )
№9
[sayto]Бармалей[/sayto], что значит "меньшее основание"? Не очень понял в данном контексте.. base 62 всего лишь собирает однотипные выражения и индексирует их в основном массиве, вынося значения.
№8
Правильнее сказать "сжимаем CSS packer'ом", т.к. при кодировании в систему с меньшим основанием объем информации только увеличивается.
№7
ИМХО, не оправдано.
При малейшем редактировании придется подымать бекап, вносить изменения, сжимать "своим компрессором" (непонимая зачем нужно было изобретать велосипед и чем не удовлетворил cleancss.com) и еще потом packer'ом.

Т.к. CSS кешируется браузером, но врядли вы выиграете на этом существенное время. На фоне загружаемых скриптов юкоза (~300кб) и графики (~200-600кб), 7кб роли не сыграют.

№6
Уже попробовал сделать, всё получилось Алеко :)
№5
Статья нужная !!!
Тиски прикольные, а есле еще и навести мышь на кнопку "Связь с дизайнером",
можно наблюдать как ручка от тисков таинственым образом исчезает :)
Во всяком случае в опере :-р
№4
[sayto]Илья Миськов[/sayto], не на всех сайтах вы постоянно лазаете в css. Я на своем сайте этого не делал уже достаточно давно ибо всё уже предусмотрено.
№3
Ну как бы полезно, да! Но вот ты не подумал а как добавлять новые стили либо наоборот убирать ? В таком случае придется все заново делать, а это чертовски не практично. Но если смотреть что такой ксс будет сложнее хакнуть и понять то это хорошо немного тож )
№2
Тиски клевые, но немного не так выглядят в живую =)

Пост тоже неплохой

Ответ: Обижаешь, копию срисовывал с фотографии))
№1
Спасибо за информацию, буду использовать.
Тиски классно) Особенно то, как они размещены
Ответ: Спасибо =)
    © Блог StudioAD.ru 2024 год нашей эры. Не все права защищены... Копирование любой информации и материалов с обратной ссылкой приветствуется! Хостинг от uCoz.

    Если вам пришлись по душе материалы моего блога - подпишитесь на RSS дабы получать обновления незамедлительно! Я рад что вы читаете и комментируете мои экзерсисы, приятного времяпрепровождения.