Низкая производительность Jquery?

Question

[evilst]

Добрый день.



При использовании библиотеки jquery 1.7.1 столкнулся с низкой производительность сайта на офисных машинах.



Сайт gluk.us, ниже приведу основной код jvascript:

//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/>

Кто нибудь сталкивался с такой проблемой?

Answer 1

[ElaSTiC]

Ужас.

$('div.#Overlay').animate({left: -50}, 250, 'easeInOutCirc', function() {$('#Overlay').animate({left: 0})});

1. Заглавная буква зачем?
2. Почему к одному элементу разные селекторы?
3. $('div.#Overlay') — оно вообще работает?

Answer 2

[cat_crash]

Вы искренне верите что кто то за вас отпрофилирует код, отловит баги?
FireBug и Google вам в руки.

Answer 3

[NeX]

Почти весь ваш код — испльзование функций animate. Пример из вашего кода:
<co

Comments

[NeX]

Извените, комментарий раньше отправился.

$('.sliderTop').animate({marginTop: -179}, 250 );
$('#GlukSlider').animate({marginTop: -640}, 250, 'easeInOutCirc');
$('.PageContainer').animate({paddingTop: 0}, 250 );
intoheader.animate({paddingTop: 163}, 250 );
homeheader.animate({paddingTop: 163}, 250 );
PagesBackground.animate({marginTop: 0}, 250 );
LoadingLayer.animate({marginTop: 0}, 250 );

Каждая функция animate создает свой таймер, по которому происходит repain объекта в браузере. Это и есть основная причина тормозов, причем тормозов не jquery — а браузера. Первая оптимизация — использовать один repaint для всех объектов. Например, это можно сделать через функцию step:

var initGlukSliderMarginTop = $('#GlukSlider').css('marginTop');
initPageContainerPaddingTop = $('.PageContainer').css('paddingTop');
initIntoHeaderPaddingTop = intoheader.css('paddingTop');
...

$('.sliderTop').animate({marginTop: -179}, {
	duration: 250,
	step: function(now, fx){
		$('#GlukSlider').css('marginTop', initGlukSliderMarginTop + (640 - initGlukSliderMarginTop) * now );
		$('.PageContainer').css('paddingTop', initPageContainerPaddingTop + (640 - initPageContainerPaddingTop) * now );
		intoheader.css('paddingTop', initIntoHeaderPaddingTop + (640 - initIntoHeaderPaddingTop) * now);
		...
	}
});

[NeX]

$('.sliderTop').animate({marginTop: -179}, 250 );
 $('#GlukSlider').animate({marginTop: -640}, 250, 'easeInOutCirc'); 
$('.PageContainer').animate({paddingTop: 0}, 250 ); 
intoheader.animate({paddingTop: 163}, 250 ); 
homeheader.animate({paddingTop: 163}, 250 ); 
PagesBackground.animate({marginTop: 0}, 250 );
 LoadingLayer.animate({marginTop: 0}, 250 ); 

код в начале (форматирование сбилось), взят из вашего примера

[evilst]

большое спасибо за наводку

Answer 4

[Skull]

Читать и разбирать весь код конечно никто не будет. От себя скажу, что производительность у jQuery вполне нормальная. Тут больше зависит от размера объектов, которые вы анимируете.

Моему рабочему ПК 7й год пошел. Анимация на вашем сайте поддергивается при открытии браузера на первом мониторе разрешением 1920*1080, но работает плавно при открытие на мониторе 1024*768.

Вывод — или анимируйте меньше элементов одновременно, или не ждите производителньости на офисных ПК с большими мониторами.

Answer 5

[Анатолий]

'div.#Overlay' — не рабочий селектор (может жквери и понимает что Вы имеете ввиду, но синтаксически селектор не правильный)
'.Section-Page' — плохо, уточняйте тэг, увеличит производительность
div.#GlukSlider — плохо, убиарйте тег, айди на странице уникальные
ahrefs.on('click', disableLink); — зачем вешать на все ссылки евент? Делегированием замените.
Хотя я сомневаюсь что переход на 1.7 резко ухудшил бы только из-за этого производительность.