www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE8 Javascript extremely slow.

  1. #1
    Join Date
    Apr 2009
    Posts
    4

    IE8 Javascript extremely slow.

    This page http://www.schoonerphoenix.org/

    does not play well in IE8. It does NOT play well in IE8 compatibility mode or in "IE7" as executed by IE8 either. The probelm is that it is about 10 times slower than it should be with the javascript automation and the mouse position reference is shifted by about 100px.

    To see the page work correctly use the real IE7, Safari, Firefox, Opera or Google Chrome.

    I have a version of this page which works pretty much in IE8: http://www.schoonerphoenix.org/indexIE8.html

    The difference between the two sources is only a <div> container to provide a relative reference to set the location of the button at the top left.

    Why would a <div> element make IE8 slow down to a crawl?

    The percentage of machine time consumed as reported by Task Manager is:

    IE8 playing index.html 99&#37; with or without mouse movement.

    IE8 playing indexIE8.html 50% with no mouse movement and up to 85% on mouse move.

    Google Chrome 2% with no mouse movement and up to 35% with mouse movement.

    Safari 2% with no mouse movement and up to 55% with mouse movement.

    Firefox 0% with no mouse movement and up to 70% with mouse movement.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    The images on your page are much larger in height and width than what they are displayed at. Reduce the width and height of the images to match the width and height of the <img> tags, and this should help greatly. The floating sail boats around the mouse cursor cause the browser to redraw the page constantly. When those graphics float below the view port, the browser must recalculate the height of the page, add and remove scrollbars, and who knows what else it's redrawing. While it's doing this, it could very well be redrawing the images that aren't sized correctly, so the browser basically shrinks the images over and over, multiple times in a small time span which would definitely eat up processor time.

    The animation seems dog slow in Firefox only when the sail boats hover over top of the images. Start by resizing the images on your page to match the widths and heights you set in the <img> tags.

    ...

    or...

    Remove the sail boat icons that follow the mouse cursor

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    An an unrelated note, you should check out Motortopia.com. It's a social networking site for car, boat, bike and plane enthusiasts (and yes, I realize schooners historically don't have "motors" ).

    You can upload photo albums, embed videos, give the history of your project, specifications, factory options, a "boat blog", and much more. This page here shows many of the features you can use to catalog the building of your boat. Looks like a really fun and unique project. You could even start an enthusiast group centered around this project that people can join, receive updates about, and even add events to your group so you can spread the word when the boat is going to be launched.

    And it's free.

    Here's my garage page if you want to poke around or send me a friend request if you join.

  4. #4
    Join Date
    Apr 2009
    Posts
    4

    IE8 is a dog on animation script.

    Quote Originally Posted by toicontien View Post
    The images on your page are much larger in height and width than what they are displayed at. Reduce the width and height of the images to match the width and height of the <img> tags, and this should help greatly. The floating sail boats around the mouse cursor cause the browser to redraw the page constantly. When those graphics float below the view port, the browser must recalculate the height of the page, add and remove scrollbars, and who knows what else it's redrawing. While it's doing this, it could very well be redrawing the images that aren't sized correctly, so the browser basically shrinks the images over and over, multiple times in a small time span which would definitely eat up processor time.

    The animation seems dog slow in Firefox only when the sail boats hover over top of the images. Start by resizing the images on your page to match the widths and heights you set in the <img> tags....

    or...Remove the sail boat icons that follow the mouse cursor
    I'd remove the sailboats that follow the cursor if it was my page. I'm helping a guy who does diving work for me in exchange for the WEB stuff. He wants the little boats.

    As you suggested I resized all the photos to the exact size needed and removed any explicit size declaration. This helped IE8 a little maybe but it didn't fix the problem. IE8 is about 20 times slower than Google Chrome in rendering this page. http://schoonerphoenix.org

    Thing I would like to understand is why, when the:
    <div style="position:relative; width:1050px; margin-left:auto; margin-right:auto">
    is removed then IE8 gets well?

    See http://schoonerphoenix.org/indexIE8.html where it is commented out. That version plays well.

    IE7 works fine either way.
    Last edited by t22harris; 04-23-2009 at 08:16 PM.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Maybe it's the relative positioning then? Unless you are trying to position an absolutely positioned child relative to that DIV, it shouldn't need relative positioning. If IE is goofing up and relative positioning is fixing the issue, you might just need a hasLayout fix by applying the zoom: 1; CSS property and value to that tag.

  6. #6
    Join Date
    Apr 2009
    Posts
    4
    Yes, the button at the top left is absolute positioned and the <div> container was only used to reference the button. I'm going to check that <div> and see if it is the "position:relative" that is screwing up IE8. It sure feels like a browser bug to me.

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    It's not really a browser bug. Each browser has its own JavaScript interpreter, and each browser performs very differently. It's more than likely that you'll just need to live with this behavior. Computers with beefier video cards won't be affected as much, I've found, but the browser makes a huge difference, as you're finding out.

    Basically, you want a horse and buggy to compete with Formula 1 cars, and it ain't gonna happen.

  8. #8
    Join Date
    Apr 2009
    Posts
    4

    More Information on Bug Slowing IE8

    The source of my trouble with slow IE8 is the <div> tag on line 17 in:
    http://www.schoonerphoenix.org/

    The properties of this element make no difference on the bug. I've removed all properties of that <div> and the bug remains. It is the contents that make the difference. When the closing tag </div> for that block on line 68 is moved up to line 60 so the last <table> is not enclosed the performance of the rendered page jumps dramatically.

    CPU time &#37; used IE8 = 99% with the last table included within the block.

    CPU time % used IE8 = 10% with the last table not included in the block.

    So what is in that table that is puking IE8?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"/>
    <title>Captain Kruse</title>
    <link rel="stylesheet" href="schophonix.css" type="text/css" />
    </head>
    <body>
    	<script src="menuing.js" type="text/javascript"></script>
    	<img class="boat" id="dot0" alt="" src="img/boat0.gif"/>
    	<img class="boat" id="dot1" alt="" src="img/boat1.gif"/>
    	<img class="boat" id="dot2" alt="" src="img/boat2.gif"/>
    	<img class="boat" id="dot3" alt="" src="img/boat3.gif"/>
    	<img class="boat" id="dot4" alt="" src="img/boat4.gif"/>
    	<img class="boat" id="dot5" alt="" src="img/boat5.gif"/>
    	<img class="boat" id="dot6" alt="" src="img/boat6.gif"/>
      	<div class="theDIVthatMakesIE8runslow" style="position:relative;  width:1050px; margin-left:auto; margin-right:auto">
    	<h1>Schooner Phoenix</h1>
    	<h2>Captain Kruse &amp; Ensign Iris</h2>
    	<div class="mouseOff" id="stopallready" onclick="makeThemStopGo()" onmouseout="this.className='mouseOff'" onmouseover="this.className='mouseOn'">make the little boats STOP</div>
    	<hr />
    	<script src="boatcursor.js" type="text/javascript"></script>	
    	<table class="tablestyle">
    	    <tr> 
    	         <td valign="top">
    	         	<a class="specialLink" title="Cool Gaff Rigged Schooner" onclick="return popup('http://www.libertyhospitalityofmaine.com/images/schooner.jpg', 'photowindow1' , 1)" href="">     
    	               	<img src="img/pirate_small.jpg" alt="" /></a>               
    	         </td>
    	         <td valign="top">
    	         	<a class="specialLink" title="The Spar Hut at Night" onclick="return popup('http://oiyc.org/forums/uploads/gallery_799_85_43797.jpg', 'photowindow1' , 0)" href="">
    	         		<img src="img/iris_small.jpg" alt="" /></a>
    	         </td>        
    	    </tr>
    	</table>
    	<br/>
    	<table class="tablestyle">
    	<tr>
    	    <td class="midlinks">
    			<a href="index.html" onmouseover="this.parentNode.style.backgroundColor = '#DD7777'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Home</a></td>		
    	    <td class="midlinks">    
    			<a href="feedback.html" onmouseover="this.parentNode.style.backgroundColor = '#55AA55'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Feedback</a></td>	    
    	    <td class="midlinks">
    			<a href="info.html" onmouseover="this.parentNode.style.backgroundColor = '#BB88BB'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Latest Info</a></td>	
    	    <td class="midlinks">
    			<a href="video.html" onmouseover="this.parentNode.style.backgroundColor = '#3377FF'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Video</a></td>		
    	    <td class="midlinks">
    			<a href="photo.html" onmouseover="this.parentNode.style.backgroundColor = '#FF7733'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Photo Album</a></td>			
    	    <td class="midlinks">
    			<a href="photo2.html" onmouseover="this.parentNode.style.backgroundColor = '#DD00DD'" onmouseout="this.parentNode.style.backgroundColor = '#7777DD'">Photo Album2</a></td>
    	</tr>
    	</table>
    	<br/>
    	<div style="background-color:#F93; margin-bottom:20px; border:2px #D66 solid; padding:10px 20px 10px 20px; font-size:18px; margin-left:auto; margin-right:auto; width:950px; text-align:left;"> This website is for tracking the progress of the Schooner Phoenix.  The vessel was designed by Jay Benford. The hull was built professionally by  
    	benford boat building company in 1972.<br /><div class="divspace"></div>
    	The boat house she was built in burned down around her. The hull is ferrocement so the fire did no harm but the fella that commisioned her  did not want to complete her. So she ended up in lake union for a while.  In the early 80's she moved to bellingham and 
    	was made to look like a schooner,  but not to any real plan. The shrouds, for instance, were run through the bulwarks and back up to themselves. No chain plates. But they did build a nice house on her. <br/>	<div class="divspace"></div>
    	In the 90's She moved to Lopez Island, WA. She was hauled out in 2005.  She received a new paint job topsides and bottom with new thruhulls, and various other things.  I purchased her in october, 2006. I began my efforts to build her to original  
    	design in april 2008. I will eventually put up a page here that will have  all my notes from last april til current. Below are the sail plan and interior layout.  <br /><div class="divspace" ></div>
    	Her specifications are LOA 87', LOD 60', beam 17.75', draft 9.5',displacement 51 tons, sail area 3,500 sqr ft. </div>
    
    
    	</div>	<!-- CLOSING TAG RELIVANT TO THIS DISCUSSION --> 
    	<table class="tablestyle">
    		<tr> 
    			<td><a class="specialLink" title="Sail Plan Drawing" onclick="return popup('img/sailplan.jpg', 'photowindow1' ,2)" href=""><img alt="" src="img/sailplan_small.jpg" /></a></td>
    			<td style="width:40px">&nbsp;</td>
    			<td><a class="specialLink" title="Layout Drawing" onclick="return popup('img/layout.jpg', 'photowindow1' ,3)" href=""><img alt="" src="img/layout_small.jpg" /></a></td>
    		</tr>
    	</table>
    
    </body>
    </html>
    Last edited by t22harris; 04-24-2009 at 12:12 PM.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by t22harris View Post
    So what is in that table that is puking IE8?
    I'll bet a dime on the file menuing.js
    You are loading the images from another url? Why?
    Code:
    getImgSize("http://oiyc.org/forums/uploads/gallery_799_85_43797.jpg",0);
    getImgSize("http://www.libertyhospitalityofmaine.com/images/schooner.jpg",1);
    Can't you simply copy the pictures and put them on your domain?

    On the other hand, if you need to bring pictures to a certain size, you need a graphic tool, such as Photoshop, and use a quality compression.
    Last edited by Kor; 04-24-2009 at 03:44 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles