JS1k: JavaScript Optimisations

Following up on my post on JS1k I thought I’d put together a small list of optimisations you can use if you’re looking to minify your code before compressing it. When you only have 1024 bytes to play with every byte counts!

Very obvious, store your objects for later use. You may need to use the document / context later so store them in a single byte variable.

1
2
3
4
5
6
7
8
//From:
var canvas = document.getElementById('c')
var context = canvas.getContext('2d')

//To:
d=document
t=d.getElementById('c')
c=t.getContext('2d')

If you are using Math object / functions, don’t repeat ‘Math’ over and over. It may not look much at first but it will pay off and save you loads of bytes

1
2
3
4
5
6
7
8
//From:
var colour = Math.floor(Math.random()*255);

//To:
M=Math
R=M.random
L=M.floor
colour = L(R()*255)

I found myself using 2 Pi and false quite a lot in the arc method, so why not minify them too.

1
2
3
4
5
6
7
//From:
context.arc(posX, posY, radius, 0, Math.PI*2, false);

//To (uses Math example above too):
P=M.PI*2
f=false
context.arc(posX, posY, radius, 0, P, f);

For your ‘draw’ function use an anonymous function within setInterval(). This will save you around 5 bytes.

1
2
3
4
5
6
7
8
9
10
//From:
function d(){
    //Code goes here...
}
setInterval(d,9)

//To:
setInterval(function(){
    //Code goes here...
},9)

When it comes to the canvas API it is necessary to minimise it’s usage at times since the methods can’t be stored like we did with the Math object. For that I used a mixture of arrays and for while loops.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//From:
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(50, 100, 10, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(143, 230, 15, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();//Add more if needed...

//To:
A=["red",50,100,10,"blue",143,230,15];
i=2;while(i--){
    D=i*4;
    ctx.fillStyle = A[D];
    ctx.beginPath();
    ctx.arc(A[D+1], A[D+2], A[D+3], 0, P, f);//We stored 2Pi and false in a var above
    //removed closepath() as this is done when fill is called
    ctx.fill();
}

Another quite obvious one, use the ternary operator instead of an if else statement.

1
2
3
4
5
6
7
8
9
10
//From:
if(Math.ceil(Math.random()*2) == 1){
    var result = 1
} else {
    result = -1
}

//To:
Math.ceil(Math.random()*2) == 1 ? result = 1:result = -1
//Remember you can minify the Math functions

An excellent couple of tips from Ben Almans blog post.

1
2
3
4
5
6
7
8
9
10
11
12
13
/*Backwards iterating while loop*/
//From:
for(i=0;i<20;i++){} //19 bytes

//To:
i=20;while(i--){} //17 bytes

/*Use 'this' instead of 'window'*/
//From:
w=window

//To:
w=this

Hopefully you’ve found some of these JavaScript short-cuts useful. Have any more to add to the list? Leave a comment below!

Scriptin on September 10 10 / 252 Permalink

1
2
3
4
5
6
7
8
9
10
11
12
13
Math.ceil(Math.random()*2) == 1 ? result = 1:result = -1
//To:
result=Math.ceil(Math.random()*2)==1?1:-1;

t=d.getElementById('c')
//To:
t=d.body.children.c;

setInterval(function(){
    //Code goes here...
},9)
//To:
setInterval("/*Code goes here in the string*/",9)

Also, omitting semicolons doesn’t worth, because the line break is 2 bytes.

There is many other shortcuts (with-blocks, commas, lazy logic operators and so on), but I’m too lazy now ;)

Matt on September 10 10 / 252 Permalink

Thanks for the reply Dimitry, I didn’t know about those so I’ll add them to the list!

Mathieu ‘p01′ Henri on September 13 10 / 255 Permalink

Even with an alias Math.floor(x) is too long. Prefer x|0

1
2
3
4
// also
for(i=0;i.5?1:-1;
// or
result=(Math.random()*3&2)-1;

Matt on September 19 10 / 261 Permalink

Hi p01,

Thanks for the comment, I’m not sure if WordPress messed up the comment, as the for loop looks a little confusing! I’ll add the Math.floor tip to the list though!

P.S. Love the 1kJS demos you submitted, very impressive! Any chance of an uncompressed and commented version I can read through? :P

SportsGeek on March 12 11 / 70 Permalink

1
2
3
4
5
6
//From:
Math.ceil(Math.random()*2) == 1 ? result = 1:result = -1

//To:
result=Math.ceil(Math.random()*2) == 1 ? 1:-1
//Remember you can minify the Math functions

Leave a Comment

Your email will not be published. Required fields are marked *.