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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy JavaScript painfully slow in Chrome, can it be (significantly) sped up?

    Hi, I have two websites which both use JavaScript (mostly jQuery) and I find that some animations and css-modification run very slow in Chrome, and also pretty slow in Opera. I find myself trying to speed up my code somehow, however it runs smooth in Firefox and - for the first time ever - even in IE.

    The websites are: http://petlid.net23.net/ with belonging js files:

    and http://petlid.net23.net/munin2/ with belonging js files:

    In case you want to read it right here:
    • standard-content.js
      Code:
      $("document").ready(function(){
      
      	$(".infoBar").hide();
      				
      				
      	navigator.sayswho= 
      		(function(){
      		
      			var N= navigator.appName, ua= navigator.userAgent, tem;
      			var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
      										
      			if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
      			M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
      			return N;
      			
      		})();
      		
      	var cover = $('.cover');
      	var aboutDIV = $('#about');
      	var infoBarCLASS = $('.infoBar');
      	var pBarDIV = $('#pBar');
      	var pBarExtensionDIV = $('#pBarExtension');
      
      	var maxOpacity = 1;
      	var opacitySlide = maxOpacity;
      	var maxShadowSize = 20;
      	var shadowSize = 1;
      	var shadowGrow = true;
      	var runShadowGrow = true;
      	var shadowInterval;
      	var maxExtendSize = navigator.sayswho == "Microsoft Internet Explorer" ? 389:
      					navigator.sayswho == "Opera" ? 385: 
      					navigator.sayswho == "Netscape" ? 386:
      					389;
      	
      	$(aboutDIV).click(function (){
      		$(cover).stop().fadeToggle("slow");
      	});	
      
      	$("#pBar, #pBarExtension").on("mouseover", function(){
      		
      		clearInterval(shadowInterval);
      		shadowInterval = setInterval(animateShadow, 50);
      				
      	});	
      	
      	
      	function animateShadow(){
      			
      		if(shadowGrow && shadowSize < maxShadowSize){
      			shadowSize++;
      			if(shadowSize == maxShadowSize) shadowGrow = false;
      		}
      		
      		else if(!shadowGrow){
      		
      			shadowSize--;
      			if(shadowSize == 5) shadowGrow = true;
      		}						
      		$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px #0dd9ff");
      						
      	}
      
      
      	function declineShadow(){
      							
      		if(shadowSize >0){ 
      	
      			shadowSize--;
      			$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px #0dd9ff");
      		}				
      
      		else{
      			
      			clearInterval(shadowInterval);
      			shadowInterval = setInterval(raiseMouseOutShadow, 10);
      			shadowGrow=true;
      		}
      	}
      	
      	
      	function raiseMouseOutShadow(){ 
      	
      		$(pBarDIV).css("box-shadow", "0px 0px " + shadowSize + "px black");
      	
      		if(shadowSize<maxShadowSize){
      				shadowSize++;
      		}
      		
      		else{ clearInterval(shadowInterval); shadowSize = 0;}
      				
      	}
      		
      	
      	$("#pBar, #pBarExtension").on("mouseout", function(){
      		
      		runShadowGrow = false;
      		clearInterval(shadowInterval);
      		shadowInterval = setInterval(declineShadow, 20);
      			
      	});
      
      	
      	$(pBarDIV).click(function(){
      	
      		if($(pBarExtensionDIV).width() == 0 || $(pBarExtensionDIV).width() == maxExtendSize){
      	
      			if($(pBarExtensionDIV).width() != 0){
      				$("#pBarExtension p").fadeToggle();
      				$(infoBarCLASS).fadeToggle();
      			}
      	
      		var width = $(pBarExtensionDIV).width() > 0 ? 0: maxExtendSize;
      					
      		$(pBarExtensionDIV).animate({
      		
      			width:width,
      			opacity:opacitySlide
      			}, 800, function() {
      			 
      				opacitySlide = opacitySlide == maxOpacity ? 0: maxOpacity;
      			 
      				if($(pBarExtensionDIV).width() != 0){
      					
      					$("#pBarExtension p").fadeToggle();
      					$(infoBarCLASS).fadeToggle();
      				}
      			});
      			
      		}
      		
      	});
      	
      });
    • image-rotator.js
      Code:
      $(document).ready(function(){
      	
      	//This keeps track of the slideshow's current location
      	var current_panel = 1;
      	//Controlling the duration of animation by variable will simplify changes
      	var animation_duration = 800;
      	var width = 596;
      	var divID = $("#imageSlider");
      	var animationInterval = setInterval(animateTimerBar, 10);
      	
      	$(".project").hover(function(){
      		
      		clearInterval(animationInterval);
      		animationInterval = setInterval(animateTimerBar, 20);
      		
      	}, function(){
      	
      		clearInterval(animationInterval);
      		animationInterval = setInterval(animateTimerBar, 10);
      	
      	});
      	
      	$("#bulletin1").click(function(){nextImage(3); width=596;});
      	$("#bulletin2").click(function(){nextImage(1); width=596;});
      	$("#bulletin3").click(function(){nextImage(2); width=596;});
      
      	
      	function nextImage(nr){
      		
      		$("#bulletinHolder li").each(function(){
      			  if($(this).attr("class") == "current")
      				$(this).removeClass();
      				
      		});	
      	
      		switch(nr){
      													
      				case 1:
      					divID.stop().animate({left: "-700px", top: "0px"}, {duration: animation_duration}); /*easing: 'easeOutBack',*/
      					current_panel = 2;
      					$("#bulletin2").addClass('current');
      				break;
      				
      				case 2:
      					divID.stop().animate({left: "-1400px", top: "0px"}, {duration: animation_duration});
      					current_panel = 3;
      					$("#bulletin3").addClass('current');
      				break;
      				
      				case 3:
      					divID.stop().animate({left: "0px", top: "0px"}, {duration: animation_duration});
      					current_panel = 1;
      					$("#bulletin1").addClass('current');
      				break;
      		}
      	}
      	
      	function animateTimerBar(){
      		
      		if(width==0){
      
      			nextImage(current_panel);
      			width = 596;
      		}
      		
      		width -= 1;
      		$("#timerBar").css("width", width + "px");
      	}
      	
      });
    • image-gallery.js
      Code:
      $("document").ready(function(){
      
      		var current_Image = 0;
      		
      		var imageList = $('ul[id$=images]').children();
      		$(imageList[0]).fadeIn(1000);
      				
      		setInterval(function(){
      
      			$(imageList[current_Image]).fadeOut(2000);
      			
      			if(current_Image != $(imageList).length-1){
      			
      				$(imageList[(current_Image+1)]).fadeIn(2000);
      				current_Image++;
      				
      			}
      			
      			else{
      			
      				$(imageList[0]).fadeIn(2000);
      				current_Image = 0;
      			}
      
      		}, 5000);
      
      });
    • animate-clouds.js
      Code:
      $(document).ready(function(){
      			
      		
      		var speed = [16000, 12000, 14000];
      		var children=$('div[id$=logoDiv]').children();
      		var stopped = false;
      		
      		$('.cloud').each(function(){
      		
      			$(this).css("left", "1000px");
      			
      		});
      		
      		moveClouds();
      		
      		
      		
      		function moveClouds(){
      		
      						
      			for(var i=0; i<children.length; i++){
      				
      				
      				$(children[i]).animate({left:-300}, speed[i], function(){
      					$(this).css("left", "1000px");
      					moveClouds();
      				});
      
      			}	
      					
      		}
      });
    • topic-holder_V2.js
      Code:
      $("document").ready(function(){
      
      	var hrDiv = 'div[id$=horizontalRuler]';
      	var topicHolderItem = 'ul[id$=topicHolder] li';
      	var expansionDiv = 'div[id$=expansion]';
      	
      	
      	$(topicHolderItem).hover(function(){
      				
      		$(this).children(hrDiv).css("box-shadow", "0px 0px 10px " + $(this).children(hrDiv).css("borderTopColor"));
      		
      	}, function(){
      				
      		$(this).children(hrDiv).css("box-shadow", "0px 0px 0px black");
      				
      	});
      				
      				
      	$(topicHolderItem).click(function(){
      		
      		var index = $(this).index();
      											
      		if($("#expansion").css("opacity") != 1  ){
      		
      			showDiv($(this), index);
      			
      		}
      		
      	
      		
      		
      		else if($(expansionDiv).css("opacity") !=0 && $(this).children(hrDiv).css("borderTopColor") != $(expansionDiv).css("borderTopColor")){
      			hideDiv(index, showDiv, $(this), 500);
      		}
      		
      		else hideDiv();
      
      	});
      	
      					
      	function showDiv(id, index, speed){
      	
      		$(expansionDiv).css("borderTopColor", id.children(hrDiv).css("borderTopColor"));
      		
      		$(".topic").each(function(){
      			$(this).css("display", "none");
      		});
      				
      		speed = speed == null ? 1000: speed;
      		
      		$(expansionDiv).stop().animate({opacity:1, width:900}, speed, 
      				
      			function(){
      				$(expansionDiv).stop().animate({height:500}, (speed), function(){
      					
      					scrollDown(speed);
      					$("div[id$=topic" + (index+1) + "]").fadeIn(1500);
      					
      					speed = 1000;
      				});
      					
      			}
      		);
      		
      	}
      	
      	
      	function hideDiv(index, callback, id, speed){		
      	
      		speed = speed == null ? 1000: speed;
      		
      		$(expansionDiv).stop().animate({height:0}, speed, function(){ 
      			$(expansionDiv).stop().animate({opacity:0, width:0}, speed, function(){
      			
      				callback(id, index, speed); 
      				$(".topic").each(function(){
      					$(this).css("display", "none");
      				});
      				
      				speed = 1000;
      			});
      		});
      	}
      	
      
      	function scrollDown(speed){					
      		$('body, html').stop().animate({scrollTop: $(expansionDiv).position().top}, (speed*3));
      	}
      
      });


    Change the selectors? Some unnecessary code? Some extremely bad coding?

    How can I speed this up for Chrome and Opera?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I see not difference whatsoever in the speed in Chrome vs. MSIE 9.

    Clicking on your three titles produces the same speed in showing the text (both scrolling up and down).

    On the other hand, I don't see anything on either page that is really speed-dependent. The very simple image movements you are doing shouldn't put a load on any browser.

    Am I missing something? Should I be clicking on something else or using the keyboard or what?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I too thought that these were very simple actions but they somehow run superslow for me in Chrome, the most obvious difference is the fadeIn when you click 'About Me' in the 'Powered by' div. If you don't see any difference and no bad performance whatsoever I want to ask you what your specs are, so I'll do just that; - what are your computer specs?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Nope. No difference in speed when clicking on "Powered by" or "About me".

    My machine:
    Processor: AMD A8-5500 with integrated Radeon graphics running at 3.2 GHz
    Memory: 8GB

    http://www.cpu-world.com/CPUs/Bulldo...20A8-5500.html
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm really confused about this. Is there something I should do to speed up Chrome? I tried running it in Chrome Canary which I've only used to visit the site and it was just as slow there. It'd be swell if this was just a local problem after all.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    But then I also just tried it on my wife's machine:
    Sempron 3200+ @ 1.79 GHz
    768 MB of RAM

    That's a 5 or 6 year old machine, by the by.


    And I can't really see a difference there, either. If anything, the movement (white area pulled to the right) on clicking on "Powered by" was *smoother* in Chrome, but at same speed. (With IE8, the movement seemed blocky, not smooth at all.)

    I think I have to guess you have some Chrome plugins slowing you down or maybe you picked up a virus that is only affecting Chrome.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it is running very smooth on an old computer I must say that, in a way, I'm relieved. I'll take your word for it. The cause for my concern was that I'm supposed to hand it in (I've been taking a course in web design for about 6 months) and don't want a bad grade because the page runs slow.

    I haven't found any cause for this though so I'll guess I'll check it out once I've reformatted my hard drive.

    Thanks for testing!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I don't see anything wrong with telling the instructor what you experienced on Chrome on your own computer. You can then say a "friend" (hey, I'm friendly!) tested it on two other computers without problems, so you *believe* it to be your local problem.

    That way, if it does turn out to be slow on the instructor's machine, he/she will know you made the effort.

    By the by... I just tested the "munin2" page, also.

    My wife's Sempron machine is a slow cranky old beast, and it had no problems at all with Chrome. Smooth image movement, the clouds moved very smoothly. But on IE8, the clouds "jerked" from one position to the next. IE8 obviously wasn't fast enough to keep up with the animation.

    So I'm pretty confident your problem is not with Chrome.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Apr 2004
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm not a chrome user, but you might try clearing everything on chrome, and turn off toolbars and add-ons. There may be something in chromes temp files or cookies that's draging down the cpu.

  • #10
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I've had confirmed by a friend, so it must be some local problem. Nothing left to do but to thank you, ask what you think about the design of the sites, and try to fix the issue.

  • #11
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nakins View Post
    I'm not a chrome user, but you might try clearing everything on chrome, and turn off toolbars and add-ons. There may be something in chromes temp files or cookies that's draging down the cpu.
    I tried almost everything, web history, download history, deleted cookies and other webpage- and plugin-data, cleared cache memory, still goes slow. Before that I reinstalled Chrome, no change there.

    It's not a big problem now since I know for sure that it works for others. I just assume this will resolve itself when I format my hard drive.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Isn't reformatting the drive a little extreme???

    Before you do that, install some anti-virus, anti-malware product and see if it can find the bug. I, personally, recommend installing Microsoft's FREE "Security Essentials". (Unless you are still using WindowsXP. It works there, but it has performance problems.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    May 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't mean I'd reformat for that reason, just that I'd not worry about it 'til I've reformatted my drive, something I do annually (more or less).

    I already have an anti-malware program installed and I've scanned my computer since this problem occured, so I'm not sure what it is.

    By the way, I'll should mark this as 'solved' - since talk about my computer's problem is OT. Anyhow I can't find out how to do that. Help?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Hmmm...I haven't reformatted a hard drive since I installed WindowsXP on an old Windows98 machine. 2002? 2003? And I've recovered from some pretty nasty viruses a couple of times.

    Don't worry about marking thread resolved. Not important, really.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Old Pedant View Post
    And I've recovered from some pretty nasty viruses a couple of times.
    Not exactly the recommended behavior. A compromised system cannot heal itself reliably, modern malware is way too intelligent for that.

    I once probably had a version of the TDL4 rootkit – I actually don't know for sure to this day –, which is known to be extremely clever. It even actively removes other malware, isn't that crazy? And it gets a lot crazier, it can even reinfect the MBR if you overwrite it. Here's a description of some of the crazy stuff i does: http://cleanbytes.net/the-new-boot-r...oot-record-mbr

    Eversince that day, whenever I'm confronted with a compromised system, my advice is: Reformat. A compromised system cannot reliably heal itself by removing some files, just like a mentally ill person cannot heal on their own by reasoning with their mind. As long as it's still healthy, it can defend itself. But once it got infected, there is virtually no way of telling if you're actually clean after running some malware removal software; it may very well just look like it.

    Sorry, this was sort of off-topic.
    Last edited by Airblader; 05-13-2013 at 09:37 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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