setInterval consumes CPU time and reduces browser performance

Question

I have never used jQuery before but have now implemented a part in one web page to refresh some parts of the page without reloading the page. I use following code:

function autoRefresh_div() {
    $("#refresh").load("include/refresh.php");
}
setInterval('autoRefresh_div()', 10000);

After implementing this the browser performance have get worse and use a lot more cpu. Is there a better solution to update without using to much cpu? Later on I will also add more div's to update where php file even reads from mysql.

Note: You can shortcut that to `setInterval(autoRefresh_div, 10000);` and avoid calls to `eval` behind the scenes :) — iCollect.it Ltd, Apr 30 '15 at 08:37
Try using websockets. They're much more suited to long-polling patterns than a request sent at intervals. — Rory McCrossan, Apr 30 '15 at 08:37
There isn't enough information here to diagnose CPU usage. What is the response from `refresh.php`? Do you run any other JS after each load? — joews, Apr 30 '15 at 08:40
In the php file I only update text showing current time just for test. No JS will be used in this file. — Kristofer, Apr 30 '15 at 08:43

score 1 · Answer 1 · answered Apr 30 '15 at 08:43

I think it is unlikely that the code you have posted will cause a major change in CPU usage. Normally it would take a much tighter loop than a 10-second interval.

function autoRefresh_div() {
    $("#refresh").load("include/refresh.php");
}
setInterval(autoRefresh_div, 10000);

In the above code, after 10 seconds the instruction to call autoRefresh_div will be placed on the event queue and will fire off shortly afterwards. It will load the url you specify (or fail to load it if the URL isn't correct) in the background (view the network tab on your browser tools). Essentially, you are firing off one HTTP request every 10 seconds - your CPU can do this part easily.

If you are debugging your PHP page on the same computer, perhaps that page is doing something intensive (are you loading too much data from your database before filtering it in code?). You can test this by calling the PHP page directly and observing your CPU.

Finally, if the speed is degrading over time - check the response time of the PHP page. If it is taking longer than 10 seconds (unlikely, but possible) you will have overlapping requests as the next interval will fire before the first has responded. This could cause gradual slow downs - but is more common on shorter intervals (and can be fixed by using a timeout, and resetting the timeout after the previous request has completed).

Also, Chrome has a "CPU profile" feature, in the dev tools. Very useful in OP's case. — Jeremy Thille, Apr 30 '15 at 10:16

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

setTimeout should do the same thing if you put it at the end of your function but it shouldn't be as CPU intensive.

function autorefresh_div(){
     //do what you want to be executed every 10 seconds
     setTimeout(autoRefresh_div, 10000);
}

Here are some explanations as to how the two work.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 30 '15 at 08:53

Timo

595
9
18

setTimeout happens only once. Not every 10 seconds (downvoted for that) – Jeremy Thille Apr 30 '15 at 10:14
@JeremyThille that's why you call the function inside setTimeout. Then it will wait 10 seconds and execute the function. – Timo Apr 30 '15 at 10:17
I agree, but the OP want to call the function _every_ 10 seconds, not just wait 10 seconds and call it once, which setTimeout does. – Jeremy Thille Apr 30 '15 at 10:17
You just have to put the setTimeout in the function – Timo Apr 30 '15 at 10:34
I will try this alternative, it seems better to give function time to run finish before start over if it takes more then 10 s. – Kristofer Apr 30 '15 at 11:28

setInterval consumes CPU time and reduces browser performance

2 Answers2