Very laggy animation in javascript

Question

I have made a board with 156X64 divs 3 pixel each with border radius, so it looks like a board out of LED. I have string representing 0 or 1 of each 7X5 matrix of letters.

var lgeoa="00100001000001000001100011000101110";//7X5 matrix letter A
var lgeob="10000111000010001010100011000101110";//7X5 matrix letter B
and so on...

Drawing letter means change corresponding div background color. It is working fine, but after that I wanted to animate them the problem started. I clear line and draw in every 10 milliseconds, but its very very laggy. So please how can this code be optimized to work without lags? P.S. Surprisingly it's working better in IE11 rather than in chrome.

Here is a fiddle

Answer 1

There's a lot of optimization that can be done here. I'll point out a couple.

Starting with the animate function, the first thing I notice is that you're running a bit of code every 10ms. Why don't we check out what's being run?

function animate() {
    var string = "აბგდევზთიკლმნოპჟრსტუფქღყშჩცძწჭხჯჰ ტესტ ტესტ აი ემ ე თეიბლ ტექსტი იწერება აქ"; //string to animate
    position = 150; //initial position of string
    window.setInterval(function () {
        clearLine(0);
        drawOnBoard(string, position, 0);
        position = position - 1;
    }, 10);
}

Clearline is the first function.

function clearLine(n){
    for(var i=n*symbolHeight*lineWidth+n*lineWidth;i<(n+1)*symbolHeight*lineWidth+n*lineWidth;i++)
        leds[i].style.backgroundColor="black";
}

That's a bit of a mess in the for loop. My understanding is that non-compiled code will run all of that math for every single iteration. So let's move it out of the for loop.

function clearLine(n) {
    var initial = n * symbolHeight * lineWidth + n * lineWidth;
    var length = (n + 1) * symbolHeight * lineWidth + n * lineWidth;
    for (var i = initial; i < length; i++)
    leds[i].style.backgroundColor = "black";
}

Ah but there's still more to be done. I see that both equations have a lot of shared math.

function clearLine(n) {
    var whateverThisIs = symbolHeight * lineWidth + n * lineWidth;
    var initial = n * whateverThisIs;
    var length = (n + 1) * whateverThisIs;
    for (var i = initial; i < length; i++)
    leds[i].style.backgroundColor = "black";
}

I saw that you're moving on so I'll stop working on this for now. There's still plenty more to optimize.

Here's a fiddle of the updated version.