browser doesn't response, long calculations

[Hollow Quincy]

Hi,

I have to do quite long calculations in javascript. It takes some time
and I can't reduce it.
During this calculations browser (firefox) doesn't response. This is
unacceptable.
During my method I call webservices etc, but I don't change view.
I can split this method to smaller pieces. But it didn't help because
I do one part after another.
I was wondering if timer will help ?
I would like to do my script "in background" (but javascript doesn't
support multithreading).

How can I do long running script to not hang browser ?

Thank you for help

 

[Thomas 'PointedEars' Lahn]

I have to do quite long calculations in javascript.

There is no "javascript".

[…]
During this calculations browser (firefox) doesn't response. This is
unacceptable.
[…]
I was wondering if timer will help ?
"timer"?

I would like to do my script "in background" (but javascript doesn't
support multithreading).

See above. Your statement is bound to be false.

How can I do long running script to not hang browser ?

This is a FAQ. Try the DOM method, window.setTimeout(). For Firefox, i.e.
Gecko 1.9.1 and later, you might want to use web workers.


PointedEars

 

[Bart Van der Donck]

I have to do quite long calculations in javascript. It takes some time
and I can't reduce it.

Javascript is not a good environment to do such things.

During this calculations browser (firefox) doesn't response. This is
unacceptable.
During my method I call webservices etc, but I don't change view.
I can split this method to smaller pieces. But it didn't help because
I do one part after another.
I was wondering if timer will help ?
I would like to do my script "in background" (but javascript doesn't
support multithreading).

How can I do long running script to not hang browser ?

I think you should split up the calculations; I would absolutely move
(at least partly) the heavy-duty work to the server. Iframe and AJAX
techniques can easily pass arguments to a server script and then
receive the calculated response.

In any case, the visitor must be animated while he's waiting:

(1) with a general 'loading'-image like
http://www.google.com/images?q=animated+loading+gif
(2) you could program a progress bar, and update its status in
various subparts of the calculation

Hope this helps,

 

[Evertjan.]

Bart Van der Donck wrote on 09 mrt 2011 in comp.lang.javascript:

Javascript is not a good environment to do such things.


I think you should split up the calculations; I would absolutely move
(at least partly) the heavy-duty work to the server. Iframe and AJAX
techniques can easily pass arguments to a server script and then
receive the calculated response.

Using serverside capacity is usually right,
but this only applies to low parallel client counts.

When there are many, many users, the logical aim is just the opposite by
using as much clientside processing capacity as possible.

 

[Hollow Quincy]

I think you should split up the calculations; I would absolutely move
(at least partly) the heavy-duty work to the server. Iframe and AJAX
techniques can easily pass arguments to a server script and then
receive the calculated response.

In any case, the visitor must be animated while he's waiting:

(1) with a general 'loading'-image like
   http://www.google.com/images?q=animated+loading+gif
(2) you could program a progress bar, and update its status in
    various subparts of the calculation

I can't put calculations in server side (because trick is to put it in
client side). Now I do something like that:

$(document).ready(function() {
setTimeout( f(), 0);
});

var counter=0;
function f(){
//....
for (j = 0; j < 100; j++) {
//my heavy calculations
}

if (counter < 50) {
counter++;
setTimeout( f(), 100); //setTimeout with 0 or 100 or 1000 hang
browser
}}

After (about) 10 calling of function f() browser work very slow and is
not responding and hang.
I would like to do the calculations in background.. Of course I will
do progressbar and animation, but I can't hang browser..

What else can I do ?

Thank you very much for help

 

[Hollow Quincy]

                    ^^^> });



                   ^^^





Is that real code?

In the marked spots you are calling the function 'f' right
there and then, and just have their return value scheduled for being
called after the delay.

Call setTimeout with just a reference to the function 'f'

setTimeout(f, 100);

Ok, it was my mistake, but even with "setTimeout(f, 100);" firefox
doesn't hang but work very very slow.
What should should I do to not hang browser? I am experimenting with
making more steps and doing more setTimeouts.. 100 mili seconds is it
long or not for browser ?

 

[Bart Van der Donck]

Bart Van der Donck wrote on 09 mrt 2011 in comp.lang.javascript:



Using serverside capacity is usually right,
but this only applies to low parallel client counts.

When there are many, many users, the logical aim is just the opposite by
using as much clientside processing capacity as possible.

I would never use such heavy clientside processing in javascript (and
certainly not "as much as possible"!). I think it's a recipe for
browser/memory problems. You can control (and scale) server
performance, but not the client.

Anyway, I would think the original poster is maybe a bit too quick
with his conclusion that it can't be done serverside. E.g. '1+2' can
be sent to
<iframe src="do_sum.php?a=1&b=2" ... />

Hope this helps,

 

[Erwin Moller]

I would never use such heavy clientside processing in javascript (and
certainly not "as much as possible"!). I think it's a recipe for
browser/memory problems. You can control (and scale) server
performance, but not the client.

Anyway, I would think the original poster is maybe a bit too quick
with his conclusion that it can't be done serverside. E.g. '1+2' can
be sent to
<iframe src="do_sum.php?a=1&b=2" ... />

But that was exactly what Evertjan said.
I think you misread him.

Evertjan:
"Using serverside capacity is usually right, but this only applies to
low parallel client counts."

Which translates into: "If you have many clients that each need a heavy
serverside calculation, your server is in trouble."

But you are right of course concerning heavy clientside calculations.
I wouldn't use an app that eat most of my memory/cpu via JavaScript.

Regards,
Erwin Moller

 

[Thomas 'PointedEars' Lahn]

Jake Jarvis wrote:
[...]

^^^> });




Is that real code?

In the marked spots you are calling the function 'f' right
there and then, and just have their return value scheduled for being
called after the delay.

Call setTimeout with just a reference to the function 'f'

setTimeout(f, 100);

Ok, it was my mistake, but even with "setTimeout(f, 100);" firefox
doesn't hang but work very very slow.
What should should I do to not hang browser? I am experimenting with
making more steps and doing more setTimeouts.. 100 mili seconds is it
long or not for browser ?

It's _millisecond_, whether it is a long or short time for a browser depends
on several factors.

Your main problem, however, is that your approach is wrong. By calling
setTimeout() in a loop with the same milliseconds value, you are running
"threads" (for the lack of a better word) at approximately the same time.
This is why the browser becomes unresponsive but does not consider the
script to hang. Probably the CPU usage of the browser or the tab process
goes through the roof:

CPU usage (%)
^ ,-------------.
100 + | Thread #100 |
: `~~~~~~~~~~~~~'
: ,~~~~~~~~~~~~~.
: | Thread #2 |
: :-------------:
: | Thread #1 |
'----+----------------> time (ms)
100

While you could run window.setTimeout() (you should use the qualified
reference) with a larger multiple of the loop index as milliseconds value,
this would not solve the problem as threads could still become stacked if
a thread took more time than you defined:

CPU usage (%)
^
100 + ,. ,.
: #4|| #5|| …
: ,----.-----.----.----.
: | #2 | #3 | #4 | #5 | …
: ,---------+-----+----+----+----.
: | #1 | #2 |#3 | #4 | #5 | …
'----+----+----+----+----+----+----+----+----> time (ms)
100 200 300 400 500 600

So you should only run *one* "thread" that does the calculation instead:

window.setTimeout(function() {
for (j = 0; j < 100; j++)
{
/* heavy calculations */
}
}, 10);

which would mean

CPU usage (%)
^
100 +
:
:
:
: ,----------------------------------------.
: | Thread #1: 1 … 100 |
'-+------------------------------------------> time (ms)
10

See also my other answer. HTH.

PointedEars

 

[Ry Nohryb]

Ok, it was my mistake, but even with "setTimeout(f, 100);" firefox
doesn't hang but work very very slow.
What should should I do to not hang browser? I am experimenting with
making more steps and doing more setTimeouts.. 100 mili seconds is it
long or not for browser ?

Hi "Hollow Quincy",

I've written this for you:

function veryLongRunningCalculation () {

// Set-up here the context for your long calculation
// For example, this one averages 100 million calls to Math.random()

var kCount= 100e6;
var ctr= 0;
var accummulator= 0;

var kWork_ms= 150; // work in slices this ms long
var kRest_ms= 5; // pause this ms between work slices

(function loop () {

var exit = Date.now()+ kWork_ms;

while ( (Date.now() < exit) && (++ctr < kCount) ) {
accummulator += Math.random();
}

if (ctr < kCount) {
// Keep looping, not done yet.
setTimeout(loop, kRest_ms);
}
else {
// DONE
alert("Average ("+ ctr+ ") -> "+ (accummulator/
ctr).toFixed(2));
}

})();
}

veryLongRunningCalculation();

Hope it helps.

 

[Ry Nohryb]

Have a look at http://winhlp.com/node/633. It deals with this
problem.

To explain the problem it's essential to introduce the browsers' event
loop:

while (RUN) {
processEvent( waitNextEvent() );
}

Perhaps it would be a good idea to do so, in that site.