Chrome slows down javascript if page is not active [duplicate]

Question

If I write a javascript code what uses setTimeout/setInterval, time will not be valid on Chrome if the related page isn't active. To demonstrate, just simply create an html file with a js code like this:

<script>
    var title = 1;
    setInterval(function(){document.title = "X:"+title; title+=1}, 250);
</script>

Open page several time, and you'll see that if a page is not active, the title will increment only in abount 2 sec, instead of 250ms. It is a very critical issue in my development. Does anyone know how to evade it? A simple Chrome options could be enought too if there is.

Just to mark it as not duplicate: It is not for animations, it is for background workings. The provided example is very accurate! I need to run script in very accurately and do operations fastly in backgrounded tabs. I know, 99,9999% of people does not need it...

Answer 1

Neither function is considered accurate by intention. You never should rely on provided timespans. This inaccuracy can be stressed to some amount by browser when your page isn't visible.

Actually it doesn't make sense to keep working in background using a regular webpage. If you really need to do that try some WebWorker instead. The webpage is for user interaction ... user interaction does not happen in background by intention. Processing things in background is best put in a worker thread. So, it's all about runtime context matching code's conceptual intention.

Answer 2

Adding to what cepharum has, it is impossible to guarantee that your code will be execute every 250ms exactly. Chrome is not a real time operating system, and neither is your code. Depending on the implementation of the interpreter, it may even experience drifts and delays.

With that being said, if you only want to reduce the delay, you can use a worker to trick the system by creating a new thread that will not have its refresh rate limited:

function createWorker(main){
    var blob = new Blob(
        ["(" + main.toString() + ")(self)"],
        {type: "text/javascript"}
    );
    return new Worker(window.URL.createObjectURL(blob));
}

// Worker
var worker = createWorker(function(self){
    setInterval(function(){
        self.postMessage(Date.now());
    }, 250);
});
worker.onmessage = function(e) {
    console.log("Worker: " + e.data);
}

https://jsfiddle.net/DerekL/ouzcdh9g/