Пакуем JS и CSS в png

Ненормальное программирование*

Jacob Seidelin http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html опубликовал интересную идею — паковать JS код в изображения PNG и распаковывать их обратно при выполнении. При этом происходит сжатие кода, и появляется необычная возможность реализации интеллектуальных систем восстановления изображений исключительно на языке растров. Указывая пространственное положение очередного изображения-кода, мы можем формировать очень интересные структурированные по принципу нарезки (tiling) библиотеки практически неограниченного размера, высоко оптимизированные по трафику и времени доступа к конкретному участку кода.

Список его примеров выглядит весьма интересным

prototype-1.6.0.2.js
123 KB Javascript compressed to 30 KB PNG (24%)

jquery-1.2.3.min.js
53 KB Javascript compressed to 17 KB PNG (32%)

excanvas.js
24 KB Javascript compressed to 8 KB PNG (33%)

excanvas-compressed.js
10 KB Javascript compressed to 5 KB PNG (50%)

dijit.js
46 KB Javascript compressed to 16 KB PNG (35%)

Кому интересно, вот еще ссылочка на публикацию и обсуждение этой темы
ajaxian.com/archives/want-to-pack-js-and-css-really-well-convert-it-to-a-png-and-unpack-it-via-canvas?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+ajaxian+(Ajaxian+Blog)

UPD:
Существует перевод статьи
webo.in/articles/habrahabr/47-compression-using-canvas/
Перевод: Мациевский Николай aka sunnybear sunnybear.habrahabr.ru/
Опубликована: 16 июня 2008
Ссылка на Хабре habrahabr.ru/blogs/javascript/33841/

javascript

+88

23 августа 2010, 02:34

147

Valery35 30,3

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

комментарии (99)

VolCh 23 августа 2010, 02:41 #

Оригинально, но практический смысл не понял

kostin 23 августа 2010, 02:52 # ↑

Экономия трафика, ускорение загрузки, не?

+30

VolCh 23 августа 2010, 03:09 # ↑

Стандартное сжатие сервером настолько плохо сжимает, что есть смысл заморачиваться с распаковкой на стороне клиента?

–6

kostin 23 августа 2010, 03:19 # ↑

Вы про gzip? Не знаю, кто из них жмёт лучше, но gzip не всегда и не везде можно включить. Этот метод вряд ли лучше, но какой-то практический толк он таки имеет.

r13 23 августа 2010, 04:23 # ↑

А почему не всегда и не везде?

НЛО прилетело и опубликовало эту надпись здесь

+15

TheShock 23 августа 2010, 08:46 # ↑

например, на конкурсе «Javascript весом не больше 10к» гзип не прокатывает, а пнг — прокатывает)

+11

VasilioRuzanni 23 августа 2010, 08:59 # ↑

Это исключение в стиле «for fun», а не реальные production-условия.

–4

TheShock 23 августа 2010, 09:09 # ↑

тем не менее, такие примеры есть.
факт описанный в топике должен знать каждый жс-кодер.
с другой стороны непонятно, зачем постоянно повторять одну и ту же статью

DIDJER 23 августа 2010, 10:11 # ↑

Скажем так, этот пример — частный случай, поэтому предлагаю рассматривать его в частном порядке, вы так не думаете?

FractalizeR 23 августа 2010, 10:11 # ↑

Думаю, такое PNG там тоже скоро запретят.

divanikus 23 августа 2010, 08:49 # ↑

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

freeAKK 23 августа 2010, 08:59 # ↑

Сжать руками, положить rewrite-правило в .htaccess?

divanikus 23 августа 2010, 10:06 # ↑

Я же говорю, админ не дает включать — т.е. выключит сам :). Просто примите это как данность.

divanikus 23 августа 2010, 10:14 # ↑

Тьфу, у меня лишь серверная в голове. Со скриптами-то да, такой подход прокатит. А вот динамическая генерация уже гораздо сложнее.

*серверная сторона

adnull 23 августа 2010, 13:15 # ↑

А не надо динамическую генерацию gzip-а делать. За это любой вменяемый админ руки оторвет, т.к. нагрузка на сервер будет дай боже.

roboter 23 августа 2010, 13:35 # ↑

не при каждом же запросе!

adnull 23 августа 2010, 13:46 # ↑

Умудряются при каждом! :)
Включая «умные» CMS, у которых это по дефолту включено.

roboter 23 августа 2010, 13:48 # ↑

ну тогда если вернуться к сути топика, то можно умудриться и картинку с js при каждом запросе генерить.

VolCh 23 августа 2010, 13:58 # ↑

Когда трафик дороже CPU это оправдано. Или если канал узкое место (что часто бывает).

Вообще по хорошему надо собирать статистику на конкретном проекте, железе и тарифе хостера и стараться, чтобы клиент получил полный ответ как можно быстрее (временем распаковки на клиенте можно пренебречь, а можно нет :) ), если дополнительных расходов для вас это не вызывает или они приемлемы.

adnull 23 августа 2010, 14:04 # ↑

Для виртуального хостинга в 90% случаев такое точно неприемлимо — там как раз CPU сильно дороже трафика и диска. За всех не скажу, как вы правильно заметили, есть много «но». Но, как правило, админы предпочитают сразу срезать даже возможность перегруза по этому параметру. Что, естественно, не устраняет перегрузов по другим параметрам (например ErrorDocument 404 / :)

VolCh 23 августа 2010, 15:05 # ↑

Я больше ориентируюсь на VPS/VDS, где процессор тебе выделяют по потребностям (небесплатно, конечно), а вот канал, видимо, фиксированный на физический сервер и его загрузка зависит от соседей, даже в пределах датацентра

andoriyu 23 августа 2010, 10:14 # ↑

а, что отдавать уже сжатое не камильфо? уйти на нормальный сервер денег нет?

divanikus 23 августа 2010, 10:15 # ↑

Нормальный сервер во внутренней сети провайдера? Только если свой поставить…

andoriyu 23 августа 2010, 21:14 # ↑

А зачем в пиринге вообще что-то сжимать? И еще важнее — зачем, что-то хостить у провайдера?

taliban 23 августа 2010, 17:00 # ↑

А пнг кодирование не грузит совсем сервер? Что-то мне подсказывает что эти алгоритмы на таких обьемах данных будут занимать одинаковые рессурсы сервера

kostin 23 августа 2010, 10:47 # ↑

habrahabr.ru/blogs/crazydev/102394/#comment_3180127

klubben 23 августа 2010, 09:28 # ↑

Так и почему просто вручную гзипом не жать? т.е. зачем пнг-то?

+17

kostin 23 августа 2010, 03:23 # ↑

Во, а ещё скрипты и стилм на имадж-хостингах хранить теперь можно.

TiGR 23 августа 2010, 10:40 # ↑

Так себе и представил распределённый сайт для извращенцев…

Индексный файл — на личном компьютере с денвером, все остальные — изображения, стили и js — разбросаны по разным хостингам картинок…

zitter 23 августа 2010, 12:03 # ↑

Предвижу заголовки — png-червь поражает image-хостинги, и рассылает трояны пользователям…
ну или что-то подобное…

D1pa5 23 августа 2010, 13:53 # ↑

Хорошая идея!

NickMitin 23 августа 2010, 10:38 # ↑

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

VolCh 23 августа 2010, 13:06 # ↑

И? Кластеру проще сформировать PNG-картинку, а не gz-файл/поток? А если говорим о формировании файлов для продакшена заранее, то проще, имхо, пользоваться gzip, который прозрачно понимают все нормальные браузеры.

NickMitin 23 августа 2010, 13:10 # ↑

Я протупил, исходя из того, что сжимать в gzip надо на лету. :)

SilentBob 23 августа 2010, 05:54 # ↑

Идея интересная в теории, но ужасная на практике. Далеко не все клиенты показывают изображение в оригинальном виде. Взять хотя бы Оперу Мобайл или Гугл Ридер Мобайл — оба сервиса работают с изображением как с _изображением_ и могут изменять его размер/качество сжатия в зависимости от соединения. Что произойдет со скриптами, закодированными вовнутрь — неизвестно.

Если уж очень хочется соригинальничать — то где-то рядом ледит статья про JS-powered gzip.

SLIDERWEB 23 августа 2010, 06:15 # ↑

Во-во, а еще некоторые прокси картинки пережимают, либо вовсе запрещают загрузку изображений, вот веселуха то… Извините, но у меня сайт не отображается. ИМХО метод сомнительный

TiGR 23 августа 2010, 10:41 # ↑

И это главный комментарий к данной статье.

ssve 23 августа 2010, 13:05 # ↑

> Что произойдет со скриптами, закодированными вовнутрь — неизвестно

Капец

–1

MikhailEdoshin 23 августа 2010, 03:47 # ↑

Возможность точечной загрузки только нужных функций через HTTP Range.

MikhailEdoshin 23 августа 2010, 03:50 # ↑

Хотя я не знаю алгоритма сжатия PNG, не факт, что там можно так просто загрузить кусочек.

bondbig 23 августа 2010, 08:49 # ↑

deflate, насколько я помню.

kurokikaze 23 августа 2010, 11:55 # ↑

Что мешает запросить с HTTP Range обычный Javascript?

MikhailEdoshin 23 августа 2010, 12:00 # ↑

Логично.

ilyaProphet 23 августа 2010, 05:53 # ↑

не давно на хабре ребята рассказывали о своей игрушке

seregagl 23 августа 2010, 11:52 # ↑

Мне кажется не нужно искать практического смысла в блоге «ненормальное программирование»

VolCh 23 августа 2010, 12:58 # ↑

Когда я размещал коммент, пост был в «веб разработке» кажется

Valery35 23 августа 2010, 13:01 # ↑

Да, позднее я его переместил в более подходящий блог

niksmile 23 августа 2010, 16:24 # ↑

Первое, что приходит на ум — вирус.
Кто мешает загрузить сначала «безобидный» скрипт, которые просто читает эти самые «рисунки», а потом просто давать команды на выполнение через эти же «рисунки»?

fruit 24 августа 2010, 02:30 # ↑

Ничего нового для вирусописателей в этом конкретном случает нет.

Стеганография и обфускация используются давным-давно. Если же с помощью JS каким-то образом удалось скомпрометировать целевую систему через браузер, то уже не важно каким образом будет доставляться вредоносный код.

Сам метод просто любопытен, так как ранее с помощью Javascript реализовать такое решение было крайне затруднительно, и, фактически, это было бессмысленным. Появление встроенного метода getImageData() изменило ситуацию.

+13

sunnybear 23 августа 2010, 02:44 #

ы?
habrahabr.ru/blogs/client_side_optimization/27207/
webo.in/articles/habrahabr/47-compression-using-canvas/

вроде даже в книжки включал. Но уже точно не помню

Valery35 23 августа 2010, 09:32 # ↑

Спасибо, ваши публикации мимо пробежали, не заметил.
Статьи немного разными получились, поэтому оставил. Добавил ссылки.

kostin 23 августа 2010, 02:50 #

Остроумный ответ любителям псевдографики и ASCII-арта?

kurokikaze 23 августа 2010, 11:56 # ↑

Угу. Они изображения делают в тексте — а мы текст в изображении. Touché.

amarao 23 августа 2010, 03:12 #

А почему бы это делать не в PNG а в самом что ни на есть законном bz2? Скрипт подкачивает bz2 файл, наверняка если не bz2, то хотя бы gz все браузеры умеют. Распаковывает, юзает.

И если мне память не изменяет, gzcompressed чуть ли не в спеках http предусмотрено.

equand 23 августа 2010, 04:57 # ↑

bunzip можно реализовать в javascript теоритически :)

amarao 23 августа 2010, 05:54 # ↑

Мне кажется, что реализация любого рода «heavy-duty» кода на интерпретируемом языке — неуважение к пользователю. Ради небольшой копеечки экономии трафика взять, например, и сожрать у человека батарейку в два раза больше — это свинство.

equand 23 августа 2010, 06:21 # ↑

Для файлов такого размера это будет «незаметно» для батареек компьютера. Жаль забросил свой код архиватора на Питоне, как раз изучал внутренности BZIP.

amarao 23 августа 2010, 06:28 # ↑

Почему незаметно? Две секунды загрузки процессора на 100% на арме — это вполне себе неприятный кусок из батарейки.

amarao 23 августа 2010, 12:49 # ↑

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

SKYnv 23 августа 2010, 03:27 #

этой идее в обед — сто лет.

SKYnv 23 августа 2010, 03:30 # ↑

и собственно ссылка на эту же статью на хабре имеется в конце статьи. рекурсия?

nekt 23 августа 2010, 05:32 #

Не труЪ.

Давайте лучше жать скрипты в аудиофайлы. Так будет интереснее.

maseal 23 августа 2010, 06:42 # ↑

Захотелось послушать мелодии а-ля модем? Я их ещё лет 15 назад наслушался :)

Untit1ed 23 августа 2010, 07:15 # ↑

тогда уж sql-injectionы лучше при помощи битбокса)

Myp 23 августа 2010, 08:29 # ↑

cat script.js > /dev/dsp

fruit 24 августа 2010, 02:40 # ↑

Идея не нова: см. спектрум, магнитофонные кассеты :)

+10

sectus 23 августа 2010, 06:56 #

Это полный бред.

PNG использует Deflate и gzip использует его же. Что мешает просто gzip-овать, а не рендерить рисунок, а потом его распарсивать?

MihallicA 23 августа 2010, 09:56 # ↑

Не только его, еще фильтры всякие

–3

yul 23 августа 2010, 07:50 #

сделаем js еще тормознее?

UrbanRider 23 августа 2010, 08:51 # ↑

habrahabr.ru/blogs/web_2_0/102394/#comment_3180046

Посмотрите данный комментарий, пройдите по ссылке. Почитайте про игру, а потом поиграйте в нее…

Тормозов не наблюдается что-то.

JS делается тормознутым не из-за плохой идеи, а из-за криворукого программиста. (ИМХО)

yul 23 августа 2010, 09:00 # ↑

Сравните с компилируемыми играми.

*компилированными

lol2Fast4U 23 августа 2010, 14:43 # ↑

Из-за криворуких разработчиков брузеров ;)
В V8 (Chrome) летают даже поделия самых криворуких разработчиков.

noRerih 23 августа 2010, 08:16 #

Имхо, в комменте из статьи от 5-го мая 2008 года, приведённой в конце этого топика, многое детально расписано.

sectus 23 августа 2010, 09:08 #

А можно мне ещё разъяснить мне связь тэга «web 2.0» и темой данной статьи.

Valery35 23 августа 2010, 09:35 # ↑

Перенес в «ненормальное программирование» и JS
Основной интерес, пожалуй, в оригинальности идеи.
Практическая ценность не столь велика.

sectus 23 августа 2010, 10:40 # ↑

Это мудрое решение.

lehha 23 августа 2010, 09:22 #

Боян, как бэ.

Из оргиринала все давно поняли, что в современных мегабитных каналах скорость загрузки ничтожно мала по сравнению с декодированием подобных картинок. У кого FF не подвисает?

SunexDevelopment 23 августа 2010, 10:04 #

Хм, так ведь тот парень с ВикиЛеакс теперь может беспалевно хранить статьи прямо на Фликре безо всяких там ухищрений

+18

ehvadimka 23 августа 2010, 10:18 # ↑

Что-то мне кажется, что скоро будет переосмысление картин леонардо да винчи.
Там найдут Javascript код

digi 23 августа 2010, 11:09 #

Самый волнующий вопрос в этой технологии — что покажет картинка? — вызывает разочарование.
Телевизионные помехи, да и только.

SCINER 23 августа 2010, 11:15 #

Картинки должны быть картинками, скрипты скриптами!
А что если админ сети или юзер компа отключили показ картинок?
А что если юзается Opera Turbo?

z123 23 августа 2010, 11:17 #

не вижу практического смысла

standov 23 августа 2010, 13:12 #

я так понял основная мысль данного метода «как-то еще заюзать canvas» и все, в принципе если браузеры смогут например работать с canvas силами видеокарт, т.е. в частности deflate в таком режиме будет реализован на ней то… в общем полет фантазии далеко может увлечь

s0rr0w 23 августа 2010, 13:41 #

Круто, можно будет проводить кибератаки на сайт с таким методом упаковки. Достаточно подсунуть свой URL с картинкой…

andan 23 августа 2010, 13:48 # ↑

Про эксплойты которые будут основаны на данном методе еще мы услышим.

VolCh 23 августа 2010, 14:53 # ↑

… и обеспечить распаковку и выполнение кода в клиенте ;)

isafdar 23 августа 2010, 14:43 #

На том сайте меня больше всего заинтересовала возможность поиграть в Марио!

artifex 23 августа 2010, 15:05 #

Этот метод скрывает от пользователя исходный код js и css, что может быть опасным с точки зрения безопасности и идеологически неправильно с точки зрения открытых технологий (не за это мы боролись). Сама же идея довольно старая. Если мы её всё ещё не наблюдаем в повседневной жизни, значит она оказалась нахрен никому не нужна.

darkfrei 23 августа 2010, 16:39 # ↑

А подобный код не несет в себе угрозы?

pietrovich 23 августа 2010, 16:26 #

бедный-бедный Noscript, теперь он будет банить не только скрипты но и картинки.
бедные-бедные антивирусы, теперь в http-трафике им придется сканить картинки.
бедные-бедные мы, весь этот бардак будет исполняться на наших машинах.

Captcha 23 августа 2010, 22:21 #

А верхом мастерства будет считаться глядя на изображение, находить ошибки в коде =)

MaxL 24 августа 2010, 13:24 # ↑

— Оу, тут у тебя тег не закрыт.
— точно, сейчас в фотошопе подправлю!
:-)

eremin 24 августа 2010, 18:14 #

извините, а «баян» уже говорили? :)

jblo 17 ноября 2010, 07:42 #

#d5d3c9! =)