471,311 Members | 1,816 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,311 software developers and data experts.

Why does this use all cpu in FireFox?

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","don derdag","vrijdag","zaterdag");
m=new
Array("januari","februari","maart","april","mei"," juni","juli","augustus","september","oktober","nov ember","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("moz illa") != -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[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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[i]+'</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;fo nt-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</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;fo nt-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</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;fo nt-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</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+ClockFr omMouseX;
}
(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[i] + ClockHeight*Math.sin(-1.0471 +
i*Split*Math.PI/180)+scrll;
F.style.left=x[i] + 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[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.style.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=document.getElementById('mzMinutes'+i)
ML.style.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.style.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=document.getElementById('mzSeconds'+i)
SL.style.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.style.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=document.getElementById('mzDate'+i)
DL.style.top=Dy[i] +
ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.style.left=Dx[i] +
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[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + 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[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] +
ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + 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[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*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[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout(('Delay')+'()',20);
}
if (ns||ie||mz)window.onload=Delay;
Jul 23 '05 #1
4 2034

Schraalhans Keukenmeester <vo******@hetepost.com> wrote in message
news:41**********************@news.xs4all.nl...
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);

--
S.C.
Jul 23 '05 #2
Stephen Chalmers wrote:
Schraalhans Keukenmeester <vo******@hetepost.com> wrote in message
news:41**********************@news.xs4all.nl...
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);

--
S.C.

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
Jul 23 '05 #3
Schraalhans Keukenmeester wrote:
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.
Jul 23 '05 #4
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.

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Todd Cary | last post: by
7 posts views Thread by sonnystarks | last post: by
11 posts views Thread by minnesotti | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.