Why does this use all cpu in FireFox?

[Schraalhans Keukenmeester]

I have no clue why below code (found it somewhere and altered it a wee
bit to my needs) will run without problem in both IE and Mozilla FireFox
1.0 but in the latter it takes up close to 100% cpu. It does check for
type of browser, and indeed all works fine apart from that ridiculous
amount of cpu taken.

If you want to see if it does so in your firefox/xp too, it's embedded
in my homepage (www.westerterp.com)

Can anyone explain why this could be the case ? Probably not everything
is relevant here but I think posting just a snippet here would be rather
meaningless. If not, sorry.

Schraalhans Keukenmeester


dCol='ff0000';//date colour.
fCol='ff0000';//face colour.
sCol='ff0000';//seconds colour.
mCol='ff0000';//minutes colour.
hCol='ff0000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!
d=new
Array("zondag","maandag","dinsdag","woensdag","donderdag","vrijdag","zaterdag");
m=new
Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='I II III IV V VI VII VIII IX X XI XII';
font='Arial';
size=1;
speed=0.5;
ns=(document.layers);
ie=navigator.userAgent.toLowerCase().indexOf("msie") != -1
mz=(navigator.userAgent.toLowerCase().indexOf("mozilla") != -1) && !ie
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y=0;x=0;Y=0;X=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy=0;Dx=0;DY=0;DX=0}
if (mz){
for (i=0; i < D.length; i++)
document.write('<div id="mzDate'+i+'"
style="position:absolute;top:0px;left:0px" height="'+a+'"
width="'+a+'"><center>'+props2+D+'</font></center></div>');
for (i=0; i < n; i++)
document.write('<div id="mzFace'+i+'"
style="position:absolute;top:0px;left:0px" height="'+a+'"
width="'+a+'"><center>'+props+Face+'</font></center></div>');
for (i=0; i < S.length; i++)
document.write('<div id=mzSeconds'+i+'
style="position:absolute;top:0px;left:0px" width="15" height="15"><font
face=Arial size=3
color='+sCol+'><center><b>'+S+'</b></center></font></div>');
for (i=0; i < M.length; i++)
document.write('<div id=mzMinutes'+i+'
style="position:absolute;top:0px;left:0px" width="15" height="15"><font
face=Arial size=3
color='+mCol+'><center><b>'+M+'</b></center></font></div>');
for (i=0; i < H.length; i++)
document.write('<div id=mzHours'+i+'
style="position:absolute;top:0px;left:0px" width="15" height="15"><font
face=Arial size=3
color='+hCol+'><center><b>'+H+'</b></center></font></div>');
}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props2+D+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props+Face+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15
height=15><font face=Arial size=3
color='+sCol+'><center><b>'+S+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15
height=15><font face=Arial size=3
color='+mCol+'><center><b>'+M+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15
height=15><font face=Arial size=3
color='+hCol+'><center><b>'+H+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="'+('Od')+'"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="'+('ieDate')+'"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="'+('Of')+'"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="'+('ieFace')+'"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="'+('Oh')+'"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="'+('ieHours')+'"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H+'</div>');
document.write('</div></div>');
document.write('<div id="'+('Om')+'"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="'+('ieMinutes')+'"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M+'</div>');
document.write('</div></div>')
document.write('<div id="'+('Os')+'"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="'+('ieSeconds')+'"
style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S+'</div>');
document.write('</div></div>')
}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = 60
//(ns|mz)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = 60 //(ns|mz)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}

if (mz){
for (i=0; i < n; i++){
var F=document.getElementById('mzFace'+i)
F.style.top=y + ClockHeight*Math.sin(-1.0471 +
i*Split*Math.PI/180)+scrll;
F.style.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=document.getElementById('mzHours'+i)
HL.style.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.style.left=x+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=document.getElementById('mzMinutes'+i)
ML.style.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.style.left=x+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=document.getElementById('mzSeconds'+i)
SL.style.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.style.left=x+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=document.getElementById('mzDate'+i)
DL.style.top=Dy +
ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.style.left=Dx +
ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
}
if (ie||ns){
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace.style;
F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours.style;
HL.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes.style;
ML.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds.style;
SL.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate.style;
DL.top=Dy +
ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy=Math.round(DY+=(Dy[i-1]-DY)*speed);
Dx=Math.round(DX+=(Dx[i-1]-DX)*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y=Math.round(Y+=(y[i-1]-Y)*speed);
x=Math.round(X+=(x[i-1]-X)*speed);
}
ClockAndAssign();
setTimeout(('Delay')+'()',20);
}
if (ns||ie||mz)window.onload=Delay;

 

[Stephen Chalmers]

I have no clue why below code (found it somewhere and altered it a wee
bit to my needs) will run without problem in both IE and Mozilla FireFox
1.0 but in the latter it takes up close to 100% cpu. It does check for

<wild guess>
setTimeout(('Delay')+'()',20);
</wg>

Div animation in Gecko browsers is very slow, and you're asking for 50
updates per second.

Try: setTimeout(('Delay')+'()',200);

 

[Schraalhans Keukenmeester]

<wild guess>
setTimeout(('Delay')+'()',20);
</wg>

Div animation in Gecko browsers is very slow, and you're asking for 50
updates per second.

Try: setTimeout(('Delay')+'()',200);

Stephen,

Thanks for your input. I took another look at the script, but the delay
is only used once at the start of the script. But your pointer to Gecko
browsers being slow at div animation may be something valuable. I'll
have another go through the script.

Do you or anyone else know about some (good) profilers for Javascript ?
Perhpas that would be helpful here.

Thanks!
Best wishes
Schraalhans

 

[Mark Preston]

I have no clue why below code (found it somewhere and altered it a wee
bit to my needs) will run without problem in both IE and Mozilla FireFox
1.0 but in the latter it takes up close to 100% cpu. It does check for
type of browser, and indeed all works fine apart from that ridiculous
amount of cpu taken.

[snip]

Ok, so I admit I'm guessing because there was a lot of code to look
through and its New Year's Eve... but you use timeouts a lot, which
Firefox takes a long time and a lot of CPU to deal with. That could be
one aspect. You also set absolutely tons of CSS styles in code, which
would be far better set in a standard CSS file and just the specific
'class="..."' set in the code.

 

[Hogne Titlestad]

Hey!

You use alot of sin/cos functions inside the loop. Try to put them outside
the loop where you can, and you won't have this problem. In my experience,
MSIE is very slow with sin/cos functions, so you should "simplify" the use
of them.

Example:

loop()
{
a = x + Math.sin ( angle * rad ) * dist;
}

Instead:

var sinCal = Math.sin ( angle * rad );
loop()
{
a = x + sinCal * dist;
}

The example might not be perfectly applicable, but you might understand what
I mean. If the angle is changed, then you can run a function to update the
angles separately.

Optimizing will bring down the cpu usage.

I have scripts which run very smoothly with setTimeout ( "func()", 25 ),
where they are heavily optimized.


Hogne T.