jQuery slower in Firefox?

[Isaac]

In Chrome and IE it seems that my jQuery runs great. FireFox seems to be much slower.

Others have posted that jQuery is slow when I run a search on jQuery lag.

I guess if everything runs well in Chrome and IE I shouldn't worry too much about FF...

[Jeff250]

Could you give an example of something that is slower?

Keep in mind that Firefox 4 for Linux disables a lot of hardware acceleration unless you are using an nvidia graphics adapter due to buggy drivers.

[Isaac]

Well, here's the site with the code:
[removed link]
I know lots of people have unique problems with my site at the moment.


Right now I think jQuery lags if all images are saved in the cache, for some reason. I think it should run faster if it's in the cache. I'm still trying to imagine what's happening inside the browser.

There's nothing too extreme in this...

Code: Select all

$(document).ready(function(){
 
			/*These initially put some divs in a hidden state*/
			$("#hello").hide();
			$(".menu").hide();
			$("#foo").hide();
			$("#hide").hide();
			/*Clear background when images load*/
			$(window).load(function(){
				$("#blacksquare").animate({width:50},"slow");
				$("#blacksquare").animate({height:0},"slow");});
 
 
 
			/*Draggable*/
			$(".menu").draggable();
 
 
			/*These hide and show stuff */
			$("#mylogo").click(function(){
				
				$("#menu1").toggle()
			});
			$(".button").click(function(){
				$("#menu1").hide();
				$(".fatdiv").fadeOut(2000);
				});
			$(".button").mouseover(function(){
				$(this).css("background-color","blue");
				$(this).css("opacity",0.4);});
			$(".button").mouseout(function(){
				$(this).css("background-color","black");
				$(this).css("opacity",1);});
			/*Menu*/
			$("#info").click(function(){
				$("#menu2").slideDown("slow");
				});
			$("#about").click(function(){
				$("#menu3").slideDown("slow");
				});
			$("#news").click(function(){
				$("#menu4").slideDown("slow");
				});
			$("#book").click(function(){
				$("#menu5").slideDown("slow");
				});
			$("#misc").click(function(){
				$("#menu6").slideDown("slow");
				});
	
			$("#links").click(function(){
				$("#menu7").slideDown("slow");
				});
			$(".close").click(function(){
				$(".menu").slideUp(2000);
				$(".fatdiv").fadeIn(800);
				$("#mylogo").show("slow");
				});
			
		});
	 
	</script> 

[fliptw]

chrome has nice set of developer tools, one of which gives you a time line on web page loading.

that beings said: why is main.png so big? convert to jpeg and watch it speed up.

[Isaac]

Oh, I think I might have been unclear. Sorry.

I wasn't talking about load time. I was worried about the animated effects by jquery being slow, even after after all content has loaded. However, I will go and make the file type adjustment to see if that improves anything. Thanks.

[Jeff250]

Seems to run identically (and well) for me on Firefox 4, Opera 11.11, and Midori 0.3.2 on my Ubuntu 11.04 laptop with Intel graphics. Have you tried Firefox 4 on windows yet?

[fliptw]

On this ancient P4 at work, FF4 is slightly faster than opera 9.63 under XP.

The load speed of that image would put people off.

You want that under 60KB.

Do you really need to be using google Analyitics? its like generating 71 KB of CSS that you don't need.

[Isaac]

On this ancient P4 at work, FF4 is slightly faster than opera 9.63 under XP.

The load speed of that image would put people off.

You want that under 60KB.

Do you really need to be using google Analyitics? its like generating 71 KB of CSS that you don't need.

Yikes, man! You're a penny pincher! I like fat websites with graphics, though I bet it wouldn't feel the same way on a smart phone. Yeah, I'll cut stuff back, though I'd like an HD image in the back for LCD 44" presentations. ImageMagick and Python should be able to size the background-image pretty easily from the HD png source.

And no, I don't need GA! I want to eventually use cpannel's built in apps plus some custom code to generate my own alternative. GA lets me be lazy, but it is an extra expense to download time and it doesn't go far enough into analyzing systems that access my site.

So, yes, I completely agree.

Seems to run identically (and well) for me on Firefox 4, Opera 11.11, and Midori 0.3.2 on my Ubuntu 11.04 laptop with Intel graphics. Have you tried Firefox 4 on windows yet?

Will do that! Yeah. I'm currently on FF 3.5+, as a backup to Chrome.

[Jeff250]

Firefox 4 on any OS would be a lot more competitive than 3.5. Firefox 3.5 has been end-of-life'd.

[Isaac]

Firefox 4 on any OS would be a lot more competitive than 3.5. Firefox 3.5 has been end-of-life'd.

Tell that to fafsa.ed.gov... They're the reason I have 3.5 installed.

[fliptw]

just change the user-agent string.

[Isaac]

I got a chrome pluggin that did that, but it had no effect on the fasfa site. It did work on other sites, though. Maybe the fasfa site tests for browser features to determine the browser.

[fliptw]

try this UA string:

Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.2.17) Gecko/20110420 Firefox/3.6.17 ( .NET CLR 3.5.30729; .NET4.0E)

used that and it stopped complaining. Not sending a UA string makes their UA detector crash.

I also used this extension: http://neko.tsugumi.org/UAControl.html

Ponder the Irony:

For the past few years, every major Web browser released has been built around a set of open standards designated by the World Wide Web Consortium, a non-profit organization charged with overseeing the continuing development of the Web. What this means is that one piece of code now looks the same on every modern browser, whether it be Internet Explorer, Firefox, Safari, Opera, or others. The majority of our users are using these modern browsers, so we can present content which is optimized for them.

[Isaac]

I GOT IT!!!!!!!!!!!!!!!!!


animating, fading, sliding and image that has been adjusted by % will cause the animated movement to lag!!!!

MUAHAHAH! I can fix this by having jquery or python quickly resave an image to the correct resolution, so that an image won't need to be sized by css!

[Jeff250]

While theoretically possible, that sounds like a bad idea.

What Firefox version, OS combinations are you seeing this lag in? By adjusted by %, do you mean any image that has been resized from its native dimensions?

[Isaac]

FF 3.6.17
Ubuntu 10.10 Desktop

Dell Mini10v

I will prepare a new page that will clearly show the css property causing a drop in FPS.

here's my test site:
[removed link]

Though there should be css problems all the animations should be running smoothly.
To fix background image size problems, that can show black space, I'll write that python script I referred to in my last post, and I'll post the results.

[Jeff250]

Yeah, it would be useful to generate the smallest possible test case that produces the lag problem and give us a link.

Re: resizing the image server-side with python, are you going to have to download a new image every time someone resizes their browser window? Make sure that the illness is worse than the cure.

[Isaac]

I'm not sure how bad it will be. Once I've made the test I'll have a better idea of how much resources it will cost. Also, I could have 5 prefabricated images for backgrounds, so there would be no reason to use ImageMajick.

[Isaac]

And omg.. the ipad zooms out instead of trying to achieve 1:1 pixel ratio.... I'm going to have to research that...

[fliptw]

note: moving backgrounds are annoying.

[Isaac]

noted

[Thenior]

Some of my suggestions

Your code:

Code: Select all

$(document).ready(function(){

         /*These initially put some divs in a hidden state*/
         $("#hello").hide();
         $(".menu").hide();
         $("#foo").hide();
         $("#hide").hide();
         /*Clear background when images load*/
         $(window).load(function(){
            $("#blacksquare").animate({width:50},"slow");
            $("#blacksquare").animate({height:0},"slow");});



         /*Draggable*/
         $(".menu").draggable();


         /*These hide and show stuff */
         $("#mylogo").click(function(){
            
            $("#menu1").toggle()
         });
         $(".button").click(function(){
            $("#menu1").hide();
            $(".fatdiv").fadeOut(2000);
            });
         $(".button").mouseover(function(){
            $(this).css("background-color","blue");
            $(this).css("opacity",0.4);});
         $(".button").mouseout(function(){
            $(this).css("background-color","black");
            $(this).css("opacity",1);});
         /*Menu*/
         $("#info").click(function(){
            $("#menu2").slideDown("slow");
            });
         $("#about").click(function(){
            $("#menu3").slideDown("slow");
            });
         $("#news").click(function(){
            $("#menu4").slideDown("slow");
            });
         $("#book").click(function(){
            $("#menu5").slideDown("slow");
            });
         $("#misc").click(function(){
            $("#menu6").slideDown("slow");
            });
   
         $("#links").click(function(){
            $("#menu7").slideDown("slow");
            });
         $(".close").click(function(){
            $(".menu").slideUp(2000);
            $(".fatdiv").fadeIn(800);
            $("#mylogo").show("slow");
            });
         
      });
    
   </script>

New code:

Code: Select all

$(document).ready(function(){

         /*These initially put some divs in a hidden state*/
         $("#hello, .menu, #foo, #hide").hide();
           /*Clear background when images load*/
         $(window).load(function(){
            $("#blacksquare").animate({width:50, height:0},"slow");
           }); 



         /*Draggable*/
         $(".menu").draggable();


         /*These hide and show stuff */
         $("#mylogo").click(function(){
            
            $("#menu1").toggle()
         });
         $(".button").click(function(){
            $("#menu1").hide();
            $(".fatdiv").fadeOut(2000);
            });
         $(".button").mouseover(function(){
            $(this).css({"background-color":"blue", "opacity":0.4});
       });
         $(".button").mouseout(function(){
            $(this).css({"background-color":"black", "opacity":1});
           });
         /*Menu*/
         $("#info").click(function(){
            $("#menu2").slideDown("slow");
			
			/*This should really be something with a class and child, like
			$(".menumain").click(functio(){
			$(this).children(".submenu").slideDown("slow");	
			});*/
			
            });
         $("#about").click(function(){ //then you could get rid of all this 
            $("#menu3").slideDown("slow");
            });
         $("#news").click(function(){
            $("#menu4").slideDown("slow");
            });
         $("#book").click(function(){
            $("#menu5").slideDown("slow");
            });
         $("#misc").click(function(){
            $("#menu6").slideDown("slow");
            });
   
         $("#links").click(function(){
            $("#menu7").slideDown("slow");
            });											//<--------- to this
         $(".close").click(function(){
            $(".menu").slideUp(2000);
            $(".fatdiv").fadeIn(800);
            $("#mylogo").show("slow");
            });
         
      });
    

[Isaac]

Oh yeah! Ok. I was trying to think of a way to shorten that script.
Thanks.

I might have to do something like that with my comment box, if possible. It's starting to become my biggest jQuery project with some parts being repeated.