Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Cool Localhost vs Host and CPU

    I've written a php program to create a javascript based page that runs smoothly as a localhost file. I upload the same exact code to a web server, and go to the page and my CPU locks at 50% causing the page to wiggle and worm across the page an an unbelievably slow pace...

    I have no idea, at all, why this is happening. I mean, the code by either, should get to the browser the same way, it doesn't have code that re-hits the server, and the browser should interpret it the same either way. I've tested in multiple browsers (IE and Firefox). Here is the script, so you can see if there are any obvious errors, but since it works on localhost without using more than 3% of my CPU, I just can't fathom why it's a cpu hog when put on another web server...

    Code:
    <html>
    <head>
      <script type=text/javascript>
        movingImages = new Array('tn1','tn2','tn3','tn4','tn5','tn6','tn7','tn8','tn9','tn10','tn11');
        curPos = new Array(10, 160, 310, 460, 610, 760, 910, 1060, 1210, 1360, 1510);
        imageMovement = 1;
    
        curImg = "0";
    
        function moveEachImage(dir, incr) {
          if( dir < 0 ) incr += 2;
          if( imageMovement == 1 ) {
            imagesLength = (movingImages.length-2) * 150;
            factor = dir * incr;
            for( x = 0; x < movingImages.length; x++ ) {
              movingImage = document.getElementById(movingImages[x]);
              curPos[x] = ( curPos[x] < -150 ? imagesLength - factor : ( curPos[x] > imagesLength ? (150 + factor) * -1 : curPos[x] - factor ) );
              movingImage.style.top = curPos[x];
            }
          }
        }
    
        function moveImages() {
          moveEachImage(1,1);
          window.setTimeout("moveImages()", 50);
        }
    
        function pauseImages()   { imageMovement = 0; }
        function restartImages() { imageMovement = 1; }
    
        function mainImage(img) {
          if( img == curImg && img != 0 ) img = 0;
          if( img == 0 && curImg == 0 ) return;
          document.getElementById(curImg).style.display = "none";
          document.getElementById(img).style.display = "block";
          curImg = img;
        }
    
        function wheel(event) {
          if( ! event ) event = window.event;
          if (event.wheelDelta)  { delta = event.wheelDelta/120; }
          else if (event.detail) { delta = -event.detail/3;      }
    
          prevMovement = imageMovement;
          imageMovement = 1;
    
          if (delta > 0) moveEachImage( 1,5);
          if (delta < 0) moveEachImage(-1,5);
    
          imageMovement = prevMovement;
    
        }
    
        if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
    	window.onmousewheel = document.onmousewheel = wheel;
        window.setTimeout("moveImages()", 5000);
    
      </script>
    
      <style>
        .blackborder { border: solid black 5px; }
        body         { overflow-y: hidden; }
      </style>
    </head>
    <body style="background: #489e27 url('background.jpg') center center fixed no-repeat">
      <div style="margin-left: 100px;"><table>
        <tr>
          <td width=240 align=center>
            <a href="javascript:mainImage('1');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn1"
                   style="position: absolute; top: 10; left: 100;" src=images/thumbnails/thumbnail1.gif>
            </a>
            <a href="javascript:mainImage('2');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn2"
                   style="position: absolute; top: 160; left: 100;" src=images/thumbnails/thumbnail2.gif>
            </a>
            <a href="javascript:mainImage('3');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn3"
                   style="position: absolute; top: 310; left: 100;" src=images/thumbnails/thumbnail3.gif>
            </a>
            <a href="javascript:mainImage('4');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn4"
                   style="position: absolute; top: 460; left: 100;" src=images/thumbnails/thumbnail4.gif>
            </a>
            <a href="javascript:mainImage('5');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn5"
                   style="position: absolute; top: 610; left: 100;" src=images/thumbnails/thumbnail5.gif>
            </a>
            <a href="javascript:mainImage('6');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn6"
                   style="position: absolute; top: 760; left: 100;" src=images/thumbnails/thumbnail6.gif>
            </a>
            <a href="javascript:mainImage('7');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn7"
                   style="position: absolute; top: 910; left: 100;" src=images/thumbnails/thumbnail7.gif>
            </a>
            <a href="javascript:mainImage('8');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn8"
                   style="position: absolute; top: 1060; left: 100;" src=images/thumbnails/thumbnail8.gif>
            </a>
            <a href="javascript:mainImage('9');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn9"
                   style="position: absolute; top: 1210; left: 100;" src=images/thumbnails/thumbnail9.gif>
            </a>
            <a href="javascript:mainImage('10');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn10"
                   style="position: absolute; top: 1360; left: 100;" src=images/thumbnails/thumbnail10.gif>
            </a>
            <a href="javascript:mainImage('11');">
              <img border=0 onMouseOver="pauseImages();" onMouseOut="restartImages();" id="tn11"
                   style="position: absolute; top: 1510; left: 100;" src=images/thumbnails/thumbnail11.gif>
            </a>
          </td><td>
            <div id="0" style="display: block;">
              This is the main page.
            </div>
            <div id="1" style="display: none;">
              <img class=blackborder src=images/display/display1.jpg>
            </div>
            <div id="2" style="display: none;">
              <img class=blackborder src=images/display/display2.jpg>
            </div>
            <div id="3" style="display: none;">
              <img class=blackborder src=images/display/display3.jpg>
            </div>
            <div id="4" style="display: none;">
              <img class=blackborder src=images/display/display4.jpg>
            </div>
            <div id="5" style="display: none;">
              <img class=blackborder src=images/display/display5.jpg>
            </div>
            <div id="6" style="display: none;">
              <img class=blackborder src=images/display/display6.jpg>
            </div>
            <div id="7" style="display: none;">
              <img class=blackborder src=images/display/display7.jpg>
            </div>
            <div id="8" style="display: none;">
              <img class=blackborder src=images/display/display8.jpg>
            </div>
            <div id="9" style="display: none;">
              <img class=blackborder src=images/display/display9.jpg>
            </div>
            <div id="10" style="display: none;">
              <img class=blackborder src=images/display/display10.jpg>
            </div>
            <div id="11" style="display: none;">
              <img class=blackborder src=images/display/display11.jpg>
            </div>
          </td>
        </tr>
      </table></div>
    </body>
    </html>
    Last edited by Sphynx; 05-07-2009 at 12:37 PM.

  • #2
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Bumping. Has nobody else encountered this problem? o.O

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Bumping again.... ???

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Can you post a link to the version on your server?

  • #5
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    My Server: i-sphynx.com/dev/

    The Server: giraftrack.com/dev/

  • #6
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Have tried it on other servers now.... cpu usage only rocks to 50% when on the primary server.... how does a host server have any bearing at all on javascript CPU? o.O

  • #7
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Those servers you posted -- which one is which? The second one does not work for me at all.

  • #8
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    the 2nd one is the one where the problem is... When you say it doesn't work, you mean the link doesn't work (404)? Or the images just lock up?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Quote Originally Posted by Sphynx View Post
    Have tried it on other servers now.... cpu usage only rocks to 50% when on the primary server.... how does a host server have any bearing at all on javascript CPU? o.O
    if the SPU is muulti-core or hyper-threaded, and the application environment is single-threaded, only 1/#of cores will be utilized at once.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I mean the link doesn't work.

  • #11
    New Coder
    Join Date
    Mar 2006
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Ok, I don't even know where to post anymore, this issue is getting crazier and crazier. If I go to the www.<domainname>.com page, there is no CPU usage. If I go to <domainname>.com page, the cpu skyrockets.... It's the same freakin page.... o.O

    I think it has something to do with the RedHat it's on, not the javascript, so I need to find some other place to ask. Thanks to any/every one that spent some time trying to help me on this.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •