Why does this use all cpu in FireFox?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Schraalhans Keukenmeester

    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","dins dag","woensdag" ,"donderdag","v rijdag","zaterd ag");
    m=new
    Array("januari" ,"februari","ma art","april","m ei","juni","jul i","augustus"," september","okt ober","november ","december ");
    date=new Date();
    day=date.getDat e();
    year=date.getYe ar();
    if (year < 2000) year=year+1900;
    TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
    D=TodaysDate.sp lit('');
    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.la yers);
    ie=navigator.us erAgent.toLower Case().indexOf( "msie") != -1
    mz=(navigator.u serAgent.toLowe rCase().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=Cloc kHeight/4.5
    HandWidth=Clock Width/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:0 px;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:0 px;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:0 px;left:0px" width="15" height="15"><fo nt
    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:0 px;left:0px" width="15" height="15"><fo nt
    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:0 px;left:0px" width="15" height="15"><fo nt
    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+'><ce nter>'+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+'><ce nter>'+props+Fa ce[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:0 px;left:0px"><d iv
    style="position :relative">');
    for (i=0; i < D.length; i++)
    document.write( '<div id="'+('ieDate' )+'"
    style="position :absolute;top:0 px;left:0;heigh t:'+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:0 px;left:0px"><d iv
    style="position :relative">');
    for (i=0; i < n; i++)
    document.write( '<div id="'+('ieFace' )+'"
    style="position :absolute;top:0 px;left:0;heigh t:'+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:0 px;left:0px"><d iv
    style="position :relative">');
    for (i=0; i < H.length; i++)
    document.write( '<div id="'+('ieHours ')+'"
    style="position :absolute;width :16px;height:16 px;font-family:Arial;fo nt-size:16px;color :'+hCol+';text-align:center;fo nt-weight:bold">'+ H[i]+'</div>');
    document.write( '</div></div>');
    document.write( '<div id="'+('Om')+' "
    style="position :absolute;top:0 px;left:0px"><d iv
    style="position :relative">');
    for (i=0; i < M.length; i++)
    document.write( '<div id="'+('ieMinut es')+'"
    style="position :absolute;width :16px;height:16 px;font-family:Arial;fo nt-size:16px;color :'+mCol+';text-align:center;fo nt-weight:bold">'+ M[i]+'</div>');
    document.write( '</div></div>')
    document.write( '<div id="'+('Os')+' "
    style="position :absolute;top:0 px;left:0px"><d iv
    style="position :relative">');
    for (i=0; i < S.length; i++)
    document.write( '<div id="'+('ieSecon ds')+'"
    style="position :absolute;width :16px;height:16 px;font-family:Arial;fo nt-size:16px;color :'+sCol+';text-align:center;fo nt-weight:bold">'+ S[i]+'</div>');
    document.write( '</div></div>')
    }

    (ns)?window.cap tureEvents(Even t.MOUSEMOVE):0;

    function Mouse(evnt){
    ymouse = 60
    //(ns|mz)?evnt.pa geY+ClockFromMo useY-(window.pageYOf fset):event.y+C lockFromMouseY;
    xmouse = 60 //(ns|mz)?evnt.pa geX+ClockFromMo useX:event.x+Cl ockFromMouseX;
    }
    (ns)?window.onM ouseMove=Mouse: document.onmous emove=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*parse Int(time.getMin utes())/360;
    if (ie){
    Od.style.top=wi ndow.document.b ody.scrollTop;
    Of.style.top=wi ndow.document.b ody.scrollTop;
    Oh.style.top=wi ndow.document.b ody.scrollTop;
    Om.style.top=wi ndow.document.b ody.scrollTop;
    Os.style.top=wi ndow.document.b ody.scrollTop;
    }

    if (mz){
    for (i=0; i < n; i++){
    var F=document.getE lementById('mzF ace'+i)
    F.style.top=y[i] + ClockHeight*Mat h.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.get ElementById('mz Hours'+i)
    HL.style.top=y[i]+HandY+(i*HandH eight)*Math.sin (hrs)+scrll;
    HL.style.left=x[i]+HandX+(i*HandW idth)*Math.cos( hrs);
    }
    for (i=0; i < M.length; i++){
    var ML=document.get ElementById('mz Minutes'+i)
    ML.style.top=y[i]+HandY+(i*HandH eight)*Math.sin (min)+scrll;
    ML.style.left=x[i]+HandX+(i*HandW idth)*Math.cos( min);
    }
    for (i=0; i < S.length; i++){
    var SL=document.get ElementById('mz Seconds'+i)
    SL.style.top=y[i]+HandY+(i*HandH eight)*Math.sin (sec)+scrll;
    SL.style.left=x[i]+HandX+(i*HandW idth)*Math.cos( sec);
    }
    for (i=0; i < D.length; i++){
    var DL=document.get ElementById('mz Date'+i)
    DL.style.top=Dy[i] +
    ClockHeight*1.5 *Math.sin(currS tep+i*Dsplit*Ma th.PI/180)+scrll;
    DL.style.left=D x[i] +
    ClockWidth*1.5* Math.cos(currSt ep+i*Dsplit*Mat h.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*Mat h.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)?documen t.layers['nsHours'+i]:ieHours[i].style;
    HL.top=y[i]+HandY+(i*HandH eight)*Math.sin (hrs)+scrll;
    HL.left=x[i]+HandX+(i*HandW idth)*Math.cos( hrs);
    }
    for (i=0; i < M.length; i++){
    var ML=(ns)?documen t.layers['nsMinutes'+i]:ieMinutes[i].style;
    ML.top=y[i]+HandY+(i*HandH eight)*Math.sin (min)+scrll;
    ML.left=x[i]+HandX+(i*HandW idth)*Math.cos( min);
    }
    for (i=0; i < S.length; i++){
    var SL=(ns)?documen t.layers['nsSeconds'+i]:ieSeconds[i].style;
    SL.top=y[i]+HandY+(i*HandH eight)*Math.sin (sec)+scrll;
    SL.left=x[i]+HandX+(i*HandW idth)*Math.cos( sec);
    }
    for (i=0; i < D.length; i++){
    var DL=(ns)?documen t.layers['nsDate'+i]:ieDate[i].style;
    DL.top=Dy[i] +
    ClockHeight*1.5 *Math.sin(currS tep+i*Dsplit*Ma th.PI/180)+scrll;
    DL.left=Dx[i] + ClockWidth*1.5* Math.cos(currSt ep+i*Dsplit*Mat h.PI/180);
    }
    }
    currStep-=step;
    }
    function Delay(){
    scrll=(ns)?wind ow.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(('De lay')+'()',20);
    }
    if (ns||ie||mz)win dow.onload=Dela y;
  • Stephen Chalmers

    #2
    Re: Why does this use all cpu in FireFox?


    Schraalhans Keukenmeester <voornaam@hetep ost.com> wrote in message
    news:41d2b6ac$0 $6215$e4fe514c@ news.xs4all.nl. ..[color=blue]
    > 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[/color]

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

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

    Try: setTimeout(('De lay')+'()',200) ;

    --
    S.C.


    Comment

    • Schraalhans Keukenmeester

      #3
      Re: Why does this use all cpu in FireFox?

      Stephen Chalmers wrote:[color=blue]
      > Schraalhans Keukenmeester <voornaam@hetep ost.com> wrote in message
      > news:41d2b6ac$0 $6215$e4fe514c@ news.xs4all.nl. ..
      >[color=green]
      >>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[/color]
      >
      >
      > <wild guess>
      > setTimeout(('De lay')+'()',20);
      > </wg>
      >
      > Div animation in Gecko browsers is very slow, and you're asking for 50
      > updates per second.
      >
      > Try: setTimeout(('De lay')+'()',200) ;
      >
      > --
      > S.C.
      >
      >[/color]
      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

      Comment

      • Mark Preston

        #4
        Re: Why does this use all cpu in FireFox?

        Schraalhans Keukenmeester wrote:
        [color=blue]
        > 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][/color]
        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.

        Comment

        • Hogne Titlestad

          #5
          Re: Why does this use all cpu in FireFox?

          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.



          Comment

          Working...