Slow jquery performance?

Question

JavaScript

Good afternoon.

When using the jquery 1.7.1 library, I encountered poor site performance on office machines.

Site gluk.us , below is the main jvascript code:

//faces<br/>
function overlay () {<br/>
 $('div.#Overlay').animate({left: -50}, 250, 'easeInOutCirc', function() {$('#Overlay').animate({left: 0})});<br/>
}<br/>
<br/>
function slidermove() {<br/>
 if($('.Section-Page').height() != 0){<br/>
 $('div.#GlukSlider').animate({top: ContentDiv.height()}, 250, 'easeInOutCirc');<br/>
 }else{<br/>
 $('div.#GlukSlider').animate({top: LoadingLayer.height()}, 250, 'easeInOutCirc');<br/>
 }<br/>
}<br/>
<br/>
function disableLink(e) {<br/>
 e.preventDefault();<br/>
 return false;<br/>
}<br/>
<br/>
function show_subpage(subpage,thisid){<br/>
 if(subpage != undefined){<br/>
 ahrefs.on('click', disableLink);<br/>
 htmlbody.animate({scrollTop:0}, 'slow');<br/>
 ContentDiv.find('.AllPageContent').slideUp(250, 'easeInOutCirc', function() {<br/>
 var ContentSingle = ContentDiv.find('.ContainetSingle');<br/>
 ContentSingle.slideUp(250,'easeInOutCirc', function() {<br/>
 LoadingLayer.fadeIn(250);<br/>
 $.ajax({<br/>
 type: 'POST',<br/>
 url: '/'+thisid+'/'+subpage,<br/>
 data: 'page=',<br/>
 dataType: 'html',<br/>
 success: function(msg){<br/>
 if(parseInt(msg)!=0){<br/>
 LoadingLayer.fadeOut(250, function() {<br/>
 ContentSingle.html(msg);<br/>
 ContentSingle.slideDown(250,'easeInOutCirc', function() {<br/>
 slidermove(); <br/>
 ahrefs.off('click', disableLink); <br/>
 });<br/>
 });<br/>
 }<br/>
 }<br/>
 });<br/>
 <br/>
 });<br/>
 <br/>
 }); <br/>
 }<br/>
}<br/>
<br/>
function hide_subpage(){<br/>
 htmlbody.animate({scrollTop:0}, 'slow');<br/>
 var ContentSingle = $('.Section-Page').find('.ContainetSingle');<br/>
 ContentSingle.slideUp(250,'easeInOutCirc',function() {<br/>
 ContentSingle.html('');<br/>
 $('.Section-Page').find('.AllPageContent').slideDown(250,'easeInOutCirc', function() {slidermove()});<br/>
 });<br/>
}<br/>
<br/>
$(document).ready(function() {<br/>
<br/>
//Cache blocks<br/>
 LoadingLayer = $('div.#LoadingPageContent');<br/>
 ahrefs = $('a');<br/>
 htmlbody = $('html, body');<br/>
 captionBottle = $('div.#GlukSlider').find('.caption');<br/>
 PagesBackground = $('.PagesBackground');<br/>
 homeheader = $('.home_header');<br/>
 intoheader = $('.into_header');<br/>
 pageWidth = $(document).width();<br/>
 ContentDiv = $('.Section-Page');<br/>
 ContentDivPage = ContentDiv.find('.PageContent');<br/>
 <br/>
 VK.init({apiId: '2711542', onlyWidgets: true});<br/>
 <br/>
 //Slider Facts<br/>
 $('div.#slidesFacts').slides({generateNextPrev: true, generatePagination: false, slideSpeed: 350, slideEasing: 'easeOutQuad'});<br/>
 <br/>
 //Slider Home<br/>
 $('div.#MainSlider').slides({generateNextPrev: true, generatePagination: false, slideSpeed: 350, slideEasing: 'easeOutQuad'});<br/>
 <br/>
 //Slider Into<br/>
 intoheader.show(0, function() {<br/>
 $('.IntoSlider').slides({generateNextPrev: true, generatePagination: false, slideSpeed: 350, slideEasing: 'easeOutQuad'});<br/>
 intoheader.hide();<br/>
 });<br/>
 <br/>
 <br/>
 //Init FancyBox<br/>
 $('.fancybox').fancybox({<br/>
 fixed: true,<br/>
 title: false<br/>
 });<br/>
 <br/>
 $('.openContactForm').fancybox({<br/>
 fitToView : false,<br/>
 width : '70%',<br/>
 height : '70%',<br/>
 autoSize : true,<br/>
 closeClick : false,<br/>
 openEffect : 'none',<br/>
 closeEffect : 'none'<br/>
 });<br/>
 <br/>
 //Gluk Bottle Slider<br/>
 $('ul.Slider-bottle').find('li').focus(function() {<br/>
 var title = $(this).attr('title');<br/>
 var href = $(this).attr('rel');<br/>
 captionBottle.html(''+title+'');<br/>
 captionBottle.fadeIn(200);<br/>
 }).blur(function() {<br/>
 captionBottle.fadeOut(100);<br/>
 });<br/>
 <br/>
 $('ul.Slider-bottle').roundabout({<br/>
 minOpacity: 0.4, // invisible!<br/>
 minScale: 0.5, // tiny!<br/>
 tilt: -2,<br/>
 enableDrag: true<br/>
 });<br/>
 <br/>
 //OpenFacts<br/>
 $('.topMenuAction').click( function() {<br/>
 if ($('.openCloseIdentifier').is(':hidden')) {<br/>
 $('.sliderTop').animate({marginTop: -179}, 250 );<br/>
 $('#GlukSlider').animate({marginTop: -640}, 250, 'easeInOutCirc');<br/>
 $('.PageContainer').animate({paddingTop: 0}, 250 );<br/>
 intoheader.animate({paddingTop: 163}, 250 );<br/>
 homeheader.animate({paddingTop: 163}, 250 );<br/>
 PagesBackground.animate({marginTop: 0}, 250 );<br/>
 LoadingLayer.animate({marginTop: 0}, 250 );<br/>
 $('.openCloseIdentifier').show();<br/>
 } else {<br/>
 $('.sliderTop').animate({marginTop: 0}, 250 );<br/>
 $('#GlukSlider').animate({marginTop: -461}, 250, 'easeInOutCirc');<br/>
 $('.PageContainer').animate({paddingTop: 150}, 250 );<br/>
 intoheader.animate({paddingTop: 313}, 250 );<br/>
 homeheader.animate({paddingTop: 313}, 250 );<br/>
 PagesBackground.animate({marginTop: 150}, 250 );<br/>
 LoadingLayer.animate({marginTop: 163}, 250 );<br/>
 $('.openCloseIdentifier').hide();<br/>
 }<br/>
 }); <br/>
 //end OpenFacts<br/>
<br/>
//set homepage<br/>
 thisid = 'home';<br/>
 <br/>
 //adress router<br/>
 $.router(function(hash) {<br/>
 var pagename = hash.split('/');<br/>
 hash = pagename[0];<br/>
 var subpage = pagename[1];<br/>
 if(hash != ''){<br/>
 var id = hash;<br/>
 if(id != thisid){<br/>
 ahrefs.on('click', disableLink);<br/>
 overlay();<br/>
 htmlbody.animate({scrollTop:0}, 'slow');<br/>
 //hide prev page<br/>
 ContentDiv.animate({left: -pageWidth}, 500, 'easeInOutCirc', function() {<br/>
 ContentDiv.animate({left: pageWidth}, 0);<br/>
 ContentDivPage.html('');<br/>
 LoadingLayer.fadeIn(0);<br/>
 slidermove();<br/>
 //preload content<br/>
 $.ajax({<br/>
 type: 'POST',<br/>
 url: '/'+id,<br/>
 data: 'page=',<br/>
 dataType: 'html',<br/>
 success: function(msg){<br/>
 if(parseInt(msg)!=0){<br/>
 LoadingLayer.fadeOut(500, function() {<br/>
 ContentDivPage.html(msg);<br/>
 if(subpage != undefined){<br/>
 var ContentSingleHide = ContentDivPage.find('.AllPageContent');<br/>
 ContentSingleHide.hide();<br/>
 show_subpage(subpage,thisid);<br/>
 }<br/>
 ContentDiv.animate({left: 0}, 500, 'easeOutCirc', function() { <br/>
 thisid = id; <br/>
 if(subpage == undefined){<br/>
 slidermove();<br/>
 }<br/>
 ahrefs.off('click', disableLink);<br/>
 if(thisid == 'kontakty'){<br/>
 mapContacts.redraw();<br/>
 }<br/>
 if(thisid == 'proizvoditel'){<br/>
 MapFactory.redraw();<br/>
 }<br/>
 });<br/>
 });<br/>
 }<br/>
 }<br/>
 });<br/>
<br/>
});<br/>
 //header change<br/>
 PagesBackground.animate({top: 0}, 500, 'easeInOutCirc');<br/>
 homeheader.animate({top: -620}, 500, 'easeInOutCirc', function() {<br/>
 homeheader.hide();<br/>
 });<br/>
 intoheader.show(0, function() {<br/>
 intoheader.animate({top: 0}, 500, 'easeInOutCirc');<br/>
 });<br/>
 $('.menu li').removeClass('active');<br/>
 $('.menu li[rel='+id+']').addClass('active');<br/>
 <br/>
 //subpages<br/>
 }else if(subpage != undefined){<br/>
 show_subpage(subpage,thisid);<br/>
 }else if(subpage == undefined){<br/>
 hide_subpage();<br/>
 }<br/>
 //go to home <br/>
 }else{<br/>
 overlay();<br/>
 htmlbody.animate({scrollTop:0}, 'slow');<br/>
 $('.menu li').removeClass('active');<br/>
<br/>
//hide prev page <br/>
 ContentDiv.animate({left: -pageWidth}, 500, 'easeInOutCirc', function() {<br/>
 $.ajax({<br/>
 type: 'POST',<br/>
 url: '/mp/',<br/>
 data: 'page=',<br/>
 dataType: 'html',<br/>
 success: function(msg){<br/>
 if(parseInt(msg)!=0){<br/>
 ContentDivPage.html(msg);<br/>
 LoadingLayer.fadeOut(500, function() {<br/>
 ContentDiv.animate({left: 0}, 500, 'easeOutCirc', function() { <br/>
 thisid = 'hpme'; <br/>
 slidermove();<br/>
 ahrefs.off('click', disableLink);<br/>
 });<br/>
 });<br/>
 }<br/>
 }<br/>
 });<br/>
 });<br/>
 //header change<br/>
 PagesBackground.animate({'top': -1030}, 500, 'easeInOutCirc');<br/>
 homeheader.show(0, function() {<br/>
 homeheader.animate({'top': 0}, 500, 'easeInOutCirc');<br/>
 }); <br/>
 intoheader.animate({'top': -580}, 500, 'easeInOutCirc', function() {<br/>
 intoheader.hide();<br/>
 });<br/>
 }<br/>
 });<br/>
 //end adress router<br/>
})<br/>

Has anyone encountered such a problem?

Answer 1

Horror.
$('div.#Overlay').animate({left: -50}, 250, 'easeInOutCirc', function() {$('#Overlay').animate({left: 0})});
1. Capital letter why?
2. Why are there different selectors for the same element?
3. $('div.#Overlay') - does it even work?

Answer 2

Do you sincerely believe that someone will profile the code for you, catch bugs?
FireBug and Google are yours.

Answer 3

Almost all of your code is using the animate functions. Example from your code:
<co

Answer 4

Of course, no one will read and parse the entire code. From myself I will say that the performance of jQuery is quite normal. It depends more on the size of the objects you're animating.
My work PC is in its 7th year. Animation on your site is supported when the browser is opened on the first 1920*1080 monitor, but runs smoothly when opened on a 1024*768 monitor.
Conclusion - either animate fewer elements at the same time, or don't expect performance on office PCs with large monitors.

Answer 5

'div.#Overlay' - not a working selector (maybe he understands what you mean, but syntactically the selector is not correct) ' .Section
-Page' - bad, specify the tag, will increase performance
go to page unique
ahrefs.on('click', disableLink); - why hang up on all links event? Replace with delegation.
Although I doubt that the transition to 1.7 would have drastically worsened performance just because of this.