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:
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: [LIST]
[*]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));
	}

});

[/LIST]

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

How can I speed this up for Chrome and Opera?

Hi there,

Welcome to the forums :slight_smile:

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.