View Full Version : Localhost vs Host and CPU

05-07-2009, 01:27 PM
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...

<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() {
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);


.blackborder { border: solid black 5px; }
body { overflow-y: hidden; }
<body style="background: #489e27 url('background.jpg') center center fixed no-repeat">
<div style="margin-left: 100px;"><table>
<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 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 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 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 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 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 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 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 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 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 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>
<div id="0" style="display: block;">
This is the main page.
<div id="1" style="display: none;">
<img class=blackborder src=images/display/display1.jpg>
<div id="2" style="display: none;">
<img class=blackborder src=images/display/display2.jpg>
<div id="3" style="display: none;">
<img class=blackborder src=images/display/display3.jpg>
<div id="4" style="display: none;">
<img class=blackborder src=images/display/display4.jpg>
<div id="5" style="display: none;">
<img class=blackborder src=images/display/display5.jpg>
<div id="6" style="display: none;">
<img class=blackborder src=images/display/display6.jpg>
<div id="7" style="display: none;">
<img class=blackborder src=images/display/display7.jpg>
<div id="8" style="display: none;">
<img class=blackborder src=images/display/display8.jpg>
<div id="9" style="display: none;">
<img class=blackborder src=images/display/display9.jpg>
<div id="10" style="display: none;">
<img class=blackborder src=images/display/display10.jpg>
<div id="11" style="display: none;">
<img class=blackborder src=images/display/display11.jpg>

05-08-2009, 08:30 AM
Bumping. Has nobody else encountered this problem? o.O

05-10-2009, 08:39 PM
Bumping again.... ???

05-10-2009, 08:55 PM
Can you post a link to the version on your server?

05-11-2009, 08:53 AM
My Server: i-sphynx.com/dev/ (http://i-sphynx.com/dev/)

The Server: giraftrack.com/dev/ (http://giraftrack.com/dev/)

05-11-2009, 08:10 PM
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

05-11-2009, 08:33 PM
Those servers you posted -- which one is which? The second one does not work for me at all.

05-11-2009, 08:36 PM
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?

rnd me
05-11-2009, 11:10 PM
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.

05-11-2009, 11:53 PM
I mean the link doesn't work.

05-12-2009, 02:50 PM
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.