Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript setTimeout() slows down under heavy load

I've created a script that fades the background color of an element. I use setTimeout() to make an incremental change to the color every 5 ms. The script works great if I'm just fading the background color of one thing at a time, but if I've got, say, 50 elements I'm all fading at once, the speed is much slower than 5 ms because of all the concurrent setTimeout()s running at once. A fade that normally should execute in 1 second, for example, may take 30 seconds if I'm fading 50 elements at once.

Any ideas how I can overcome this?

Here's the script in case anyone has an ideas:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

It's used like this:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);
like image 200
core Avatar asked Jul 30 '09 20:07

core


People also ask

Does setTimeout affect performance?

No significant effect at all, setTimeout runs in an event loop, it doesn't block or harm execution.

Is there a limit for setTimeout?

Maximum delay value Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed immediately.

Is JavaScript setTimeout blocking?

Explanation: setTimeout() is non-blocking which means it will run when the statements outside of it have executed and then after one second it will execute.

Why is setTimeout asynchronous?

setTimeout is asynchronous: Second Line will run after 2 seconds. setTimeout is asynchronous, so the last line will not wait for setTimeout. Now the question is, how we can use setTimeout synchronously.


2 Answers

Here is an article from Google where the author discusses their work on timers for Gmail. They found that having a single high-frequency timer was faster than using multiple timers if they had heavy and rapid timer use.

You could have one timer that fires every 5ms, and add all of your elements that need to be faded to a data structure that tracks where they are in the fading process. Then your one timer can look through that list and perform the next fade for each element each time it is triggered.

On the other hand, have you tried using a library like Mootools or JQuery rather than rolling your own animation framework? Their developers have put a lot of work into optimizing these kinds of operations.

like image 109
Brian Ramsay Avatar answered Sep 22 '22 13:09

Brian Ramsay


First of all your script doesn't take into account that minimal timeout is usually 10-15ms depending on a browser. You can see my post on this topic. Inside you'll find a table for popular browsers and a link to the program that measures it, so you can verify the claim yourself. I am sorry to say but iterations every 5ms is wishful thinking.

Secondly, timers are not interrupts. There is no magic in them — they cannot interrupt whatever is running in the browser and execute their payload. Instead, they will be deferred until the running code finishes and the browser gets back the control and the ability to run timers. Fading 50 elements take time, and I bet it is more than 5ms, especially if you take into account the whole deferred model of the browser: you update DOM, and the browser will update its visual representation … at some point in time.

I want to finish on a positive note:

  • Instead of fading out 50 individual elements, try to group them and fade their parent — it can be faster.
  • Be more creative at UI. Try to come up with a solution, which doesn't require fading out a lot of independent elements at once.
  • Always verify that your background assumptions are correct before designing around them.
  • If you can, try to target modern browsers. From my personal experience, Google Chrome is very good with timers, and its JavaScript engine (V8) is extremely fast.
like image 32
Eugene Lazutkin Avatar answered Sep 22 '22 13:09

Eugene Lazutkin