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

стили и css, 16.10.2009 Пятница, 17:32
Теги: сжатие, CSS, Уроки, полезное, оптимизация

Приветствую, мои уважаемые читатели! Сегодня я расскажу вам сказку.. бррррр! Сегодня я опишу классный способ сжать ваши 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, 9898

Порядок вывода комментариев:

№15

Aleko

[sayto]WinuX[/sayto], вы забываете что есть пользователи с 20 мегабитным каналом, а есть с 30 килобитным. И для них скачивание будет длится гоораздо дольше чем распаковка.

№14

Aleko

[sayto]Асман[/sayto], знаю. Я снял все счетчики юблогов - они вызывают ошибку в IE

№13

Иван

Имхо, 4 жалкие килобайта не стоят того чтобы так мучать браузер.

№12

Aleko

[sayto]Иван0[/sayto], ничего, спасибо)

№11

Илья Миськов

Блин, не текст а шрифт (((

№10

Илья Миськов

Алеко, скажи текст, которым ты писал на картинке:"Сжимаем CSS с помощью Base62" плз )

№9

Aleko

[sayto]Бармалей[/sayto], что значит "меньшее основание"? Не очень понял в данном контексте.. base 62 всего лишь собирает однотипные выражения и индексирует их в основном массиве, вынося значения.

№8

Бармалей

Правильнее сказать "сжимаем CSS packer'ом", т.к. при кодировании в систему с меньшим основанием объем информации только увеличивается.

№7

mob_dp

ИМХО, не оправдано.
При малейшем редактировании придется подымать бекап, вносить изменения, сжимать "своим компрессором" (непонимая зачем нужно было изобретать велосипед и чем не удовлетворил cleancss.com) и еще потом packer'ом.

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

№6

владислав

Уже попробовал сделать, всё получилось Алеко :)

№5

Андрей

Статья нужная !!!
Тиски прикольные, а есле еще и навести мышь на кнопку "Связь с дизайнером",
можно наблюдать как ручка от тисков таинственым образом исчезает :)
Во всяком случае в опере :-р

№4

Aleko

[sayto]Илья Миськов[/sayto], не на всех сайтах вы постоянно лазаете в css. Я на своем сайте этого не делал уже достаточно давно ибо всё уже предусмотрено.

№3

Илья Миськов

Ну как бы полезно, да! Но вот ты не подумал а как добавлять новые стили либо наоборот убирать ? В таком случае придется все заново делать, а это чертовски не практично. Но если смотреть что такой ксс будет сложнее хакнуть и понять то это хорошо немного тож )

№2

DuckyDuck

Тиски клевые, но немного не так выглядят в живую =)

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

Ответ: Обижаешь, копию срисовывал с фотографии))

№1

владислав

Спасибо за информацию, буду использовать.
Тиски классно) Особенно то, как они размещены

Ответ: Спасибо =)

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