azproduction Mar 13 2011 at 19:46

JS1k — пишем отличное веб приложение в 1024 байт

7 min

3.4K

JavaScript*

+56

Comments 48

UFO just landed and posted this here

danilissimus Mar 13 2011 at 20:38

А почему делать можно только через замыкание?

azproduction Mar 13 2011 at 20:42

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

TheShock Mar 14 2011 at 11:45

Странно, что опции для минификатора нету, типа «воспринимать как локальный контекст» =(

Nicolette Mar 13 2011 at 21:50

Приемы ручного сжатия напомнили, как мы участвовали в Time Limit Exceeded — индийский контест на решение задач на C так, чтобы программа получалась минимальной длины. Славно мы тогда поизвратились, я о C столько нового узнала :-)

Rzhepish Mar 13 2011 at 23:34

индийский контест

чтобы программа получалась минимальной длины

Налицо парадокс :)

azproduction Mar 14 2011 at 00:22

Они стараются измениться ;)

Nicolette Mar 14 2011 at 00:25

Ннэ, так учатся писать нечитабельный код. Проведут соревнование, а потом разбирают решения-победители и берут на вооружение самые чудовищные приемы :-)

Kareshka Mar 13 2011 at 22:46

Вообще можно ещё код сжать в png. Загрузчик кода из png, разумеется, тоже нужен будет, но размер таким образом можно уменьшить, например, и со 123 кб до 30 кб (как показывает практика). :)

Infthi Mar 13 2011 at 23:11

загрузчик под килобайт вроде весит

bolk Mar 13 2011 at 23:22

Я загрузчик ужимал до минимума: bolknote.ru/files/tank-1k-game/

Kareshka Mar 13 2011 at 23:24

1 кб? С загрузчиком? Браво! :)

bolk Mar 14 2011 at 01:30

Спасибо :)

azproduction Mar 14 2011 at 00:20

Здорово — распаковщик в 109 байт + 90 байт накладных расходов. Правда этот подход в таком виде в каком есть не годится для js1k (запрещены внешние ресурсы). Если создавать картинку с image:data, то получим +30-40% к весу картинки. И не понятно будет ли оправдано это.

Вобщем прикинул: у вас картинка весит 753 байта, а кода в ней на 1059 (хотя я думал там будет 1059*4 байт ибо RGBA, почему вы брали каждый 4-й элемент, храните ещё что-то в RGB?). С data:image мы получим около 1054 байт + 100 байт распаковщик (можно оптимизировать если точить под js1k). Если занимать все пространство RGBA, то минимизированный скрипт можно ужать ещё в 5-6 раз!

Имея картинку в 650 байт (910 image:data) в неё можно засунуть около 3640 байт ужатого скрипта. Плюс 100 байт оптимизированный под js1k распаковщик. В сумме получим 1010 байт чистого кода, который теоретически должен развернуться до 3640 байт.

Поправьте если что не так.

bolk Mar 14 2011 at 00:48

Есть вариант без внешних ресурсов :) bolknote.ru/files/tank-1k-game-2/ (правда, я знаю как его ещё уменьшить).

Вобщем прикинул: у вас картинка весит 753 байта, а кода в ней на 1059 (хотя я думал там будет 1059*4 байт ибо RGBA, почему вы брали каждый 4-й элемент, храните ещё что-то в RGB?)

Я вообще хотел класть во все четыре компоненты, но сжимается лучше всего выбранный вариант.

Kareshka Mar 13 2011 at 23:23

Да, верно. Тут это и правда неуместно будет, т.к. цифры другие. Здесь это было реализовано и в рамках 10 кб это будет уместно. Не подумал.

azproduction Mar 14 2011 at 00:47

10кб тоже интересный формат, но мало кому доступен — слишком много времени уходит на написание и оптимизацию.

si14 Mar 13 2011 at 23:04

Напомнило (если кто-то ещё не читал): www.wasm.ru/article.php?article=onebyte

vrmzar Mar 14 2011 at 02:10

Восхитительно! Благодарю за наводку.

bolk Mar 13 2011 at 23:22

var a='lineTo';c[a](150,150);c[a](150,200);c[a](150,250);c[a](250,350);c[a](450,350);

c[a='lineTo'](150,150);c[a](150,200);c[a](150,250);c[a](250,350);c[a](450,350);

Вообще как-то негусто приёмов описано.

azproduction Mar 13 2011 at 23:33

Все в ваших руках.

chikuyonok Mar 14 2011 at 01:05

c[a='lineTo'](150,150);c[a](150,200);c[a](150,250);c[a](250,350);c[a](450,350);

l=c.lineTo;l(150,150);l(150,200);l(150,250);l(250,350);l(450,350);

bolk Mar 14 2011 at 01:07

Серёг, или я торможу или lineTo получит в this window.

chikuyonok Mar 14 2011 at 01:11

не, это я торможу :) Забыл про контекст

azproduction Mar 14 2011 at 01:34

var a=z.lineTo.bind(z);a(150,150); ;)

kirilloid Mar 14 2011 at 02:47

23+11*N vs 15+14*N
С семи вызовов это становится выгодней, а если выкинуть «var » в начале, то — с пяти.

TheShock Mar 14 2011 at 11:51

а если заменить .bind на [__bind__]? ;)

azproduction Mar 14 2011 at 12:46

если бинд 1н, то не получим профита ;)

TheShock Mar 14 2011 at 12:48

Ну да, все зависит от приложения)

tunelix Mar 14 2011 at 05:08

попробуйте для сжатия compressorrater.thruhere.net/ для меня там лучшим оказался Packer (Version 3.1) + допиливаю руками названия функций которые он не умеет сжимать. в моем случае Packer оказался на 10% лучше UglifyJS. Пишу тетрис. Пытаюсь затолкать 2048 байт. осталось еще 100 байт срезать, уж не знаю где еще :)

azproduction Mar 14 2011 at 10:57

Туда бы для сравнения UglifyJS добавить и GCC.
habrahabr.ru/blogs/javascript/115369/#comment_3736982

slimus Mar 14 2011 at 05:23

или я чегото не понял, или обясните мне: почему не использовали gcc? он очень качественно все делает и Вам бы не пришлось почти ничего оптимизировать руками. Почему о нем нету ни слова?

b0n3Z Mar 14 2011 at 06:44

GCC умеет работать с JavaScript?

-2

slimus Mar 14 2011 at 07:08

ага, code.google.com/closure/
Куча опций оптимизаций, сам сжимаю только им — по анализам, вроде самый оптимальный

azproduction Mar 14 2011 at 10:56

GCC Advanced=on сжал мой скрипт до 1100 байт, UglifyJS — 1048, Packer 3.1 — 1049. Притом Packer и GCC коверкают порядок переменных (d,g,f вместо a,b,c) и от обрамляющего замыкания невозможно сразу избавиться. Если вы в GCC пользуетесь особыми настройками, то посвятите.

slimus Mar 14 2011 at 11:41

хм… странно, я пробовал пакером и gcc свои скрипты — gcc выиграл во много раз. конкретно по цифрам могу написать вечером

для gcc advanced нужно приводить код в спрециальный вид, собственно как и для uglyjs только свои правила.

shurshur Mar 14 2011 at 10:59

Однако… Это не тот gcc, о котором все подумали :)

slimus Mar 14 2011 at 11:41

ну конечно не тот. я думал раз тема про JS все поймут о чем я ;)

Mew Mar 14 2011 at 09:09

Вроде бы не нашел у вас совет такого рода:
Если часто используется какой либо метод, например Math, можно сократить код так:
var m = Math;
И вызывать, например, так: m.abs();

Возможно я туплю и glifyJS это все уже сам делает.

slimus Mar 14 2011 at 10:13

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

TheShock Mar 14 2011 at 11:44

9. Замените циклы for на while, избавьтесь от оптимизаций счетчиков c = smth.length

Потом замените while на for и получите ещё N байт ;)

i=smth.length;while(i--)do(i);
for(i=smth.length;i--;)do(i);

13. Удалите двойные и одинарные кавычки из атрибутов вашего HTML кода <div id=«aaa»> — <div a=aaa>
14. Замените строки в id элементов на числа <div id=aaa> — <div a=1>

Почему бы не создавать собственные элементы? Например, <r>. Вроде бы и html короче и путь в querySelectorAll. Конечно, с канвасом так не выйдет.

azproduction Mar 14 2011 at 12:36

Дельно, правда опера не умеет вызывать события в атрибутах (onclick) у своих элементов <r>

<z onclick=alert(1)>qqq</z>

TheShock Mar 14 2011 at 12:41

Действительно. Прям как у ie. Чтож, есть элементы a,b,i,p,q,s,u + значительное количество двубуквенных.

TheShock Mar 14 2011 at 12:55

Кстати, иногда имеет смысл сделать подобную оптимизацию:

__fillStyle__ = 'fillStyle',
__fillRect__  = 'fillRect',
// =>
__fill__ = 'fill',
__fillStyle__ = __fill__ + 'Style',
__fillRect__  = __fill__ + 'Rect'

Особенно в паре с другими оптимизациями:

__fillStyle__ = 'fillStyle',
__fillRect__  = 'fillRect',
// =>
__fill__   = 'fill',
__stroke__ = 'stroke',
__Style__  = 'Style',
__Rect__   = 'Rect',
__fillStyle__   = __fill__   + __Style__,
__fillRect__    = __fill__   + __Rect__,
__strokeStyle__ = __stroke__ + __Style__,
__strokeRect__  = __stroke__ + __Rect__,

И, особо, при использовании длинных повторяющихся названий:

__getElement__             =  'getElement',
__getElementById__         = __getElement__ + 'ById',
__getElementsByTagName__   = __getElement__ + 'sByTagName',
__getElementsByClassName__ = __getElement__ + 'sByClassName',

azproduction Mar 14 2011 at 13:06

В 1кб это не выгодно, пытался так сделать, сужу по своему опыту

DenVdmj Jun 5 2012 at 17:35

ctx.f = ctx.fillRect;
ctx.__defineSetter__(«s», function (arg) { this.fillStyle = arg })

ctx.s = 'green';
ctx.f(5, 5, 25, 25);

TheShock Mar 14 2011 at 13:13

Ещё читал вариант, если необходимо использоваться сообственные функции, то лучше создать одну функцию, а внутри сделать ветвление зависимо от первого параметра.

function foo () {
  // foo code
}
function bar () {
  // bar code
}
function qux () {
  // qux code
}

// =>

function g (fn) {
  if (fn == 'foo') {
    // foo code
  }
  if (fn == 'bar') {
    // bar code
  }
  if (fn == 'qux') {
    // qux code
  }
}

azproduction Mar 14 2011 at 13:46

В таком виде не очень подходит для событий — основное место скоплений функций, но можно отфильтровать по event.type.

function g(e,t) {
  t = e.type;
  t=='click'&&code;
  t=='keyup'&&code;
  t=='keydown'&&code;
}

Show the best of all time