SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    • 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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    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.


Bookmarks

Posting Permissions

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