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

[Fender0]

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:
http://petlid.net23.net/js/image-rotator.js
http://petlid.net23.net/js/standard-content.js

and http://petlid.net23.net/munin2/ with belonging js files:
http://petlid.net23.net/munin2/js/standard-content.js
http://petlid.net23.net/munin2/js/image-gallery.js
http://petlid.net23.net/munin2/js/animate-clouds.js
http://petlid.net23.net/munin2/js/topic-holder_V2.js

In case you want to read it right here:

• standard-content.js

  $("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

  $(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

  $("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

  $(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

  $("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?

[Pullo]

Hi there,

Welcome to the forums

I just had a look at both the pages you link to in Chrome.

The first one previews just fine for me.
However, when I look at the console I see:

Uncaught SyntaxError: Unexpected token < error404.000webhost.com/?:1

So, maybe something isn't working as you intended.

When I view the second one however, my CPU spikes to 50% straight away.
I dug into this a little more and it seems that the problem is being caused by the background image and the box shadow on the div you are trying to animate the clouds over (#logoDiv).

Try (temporarily) removing both of these properties and see if it makes any difference to performance.

Hope that helps.