+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Da się zoptymalizować kod JS? (/thread-da-sie-zoptymalizowac-kod-js)
Da się zoptymalizować kod JS? - kbzium - 23-09-2011
Cześć,
poniższy kod jak widać jest napisany słabo, tak słabo, że pożera 50% mocy procesora. Jak i czy w ogóle się da go zoptymalizować, aby pobierał nie więcej jak 5%?
Kod:
function RunClouds() {
while( (y = Math.random()*100) < 20 );
$('#cloudone').fadeIn(FADETIME).animate({
left: '+=15%',
top: '-='+y+'px',
}, FLYTIME, function() {
$(this).fadeOut(FADETIME).promise().done(function() { $('#cloudone').css('left', '45%').css('top','200px') });
});
while( (y = Math.random()*100) < 20 );
$('#cloudtwo').fadeIn(FADETIME).animate({
left: '+=25%'
}, FLYTIME, function() {
$(this).fadeOut(FADETIME).promise().done(function() { $('#cloudtwo').css('left', '15%').css('top','170px') });
});
while( (y = Math.random()*100) < 40 );
$('#cloudthree').fadeIn(FADETIME).animate({
left: '+=55%',
top: '-='+y+'px',
}, FLYTIME, function() {
$(this).fadeOut(FADETIME).promise().done(function() { $('#cloudthree').css('left', '10%').css('top','355px'); RunClouds(); });
});
}RE: Da się zoptymalizować kod JS? - Kartofelek - 23-09-2011
1) zmienne globalne zamień na lokalne
2) $('#cloudthree').css('left', '10%').css('top','355px') zamień na 1 komendę
3) while ci nie jest potrzebne. Możesz spokojnie to 1 raz wyliczyć
4) spróbuj z klasami zamiast ID
Ah i jeszcze jedno
Zależy co animujesz. Jak przezroczyste png = + do mocy
Ogólnie animacje jquery są średnie wydajnościowo, dlatego czasami warto po prostu samemu coś takiego napisać, co w twoim przypadku trudne nie jest. W zasadzie to tylko + style.left ect
RE: Da się zoptymalizować kod JS? - kbzium - 23-09-2011
Kod:
document.getElementById("cloudone").style.left = 100;
alert(document.getElementById("cloudone").style.left);wyświetla pusty alert.. natomiast odwołanie jest dobre, bo wyświetla HTML DIV element. Co jest nie tak?
RE: Da się zoptymalizować kod JS? - benny - 23-09-2011
Kod:
('#cloudthree').css({
'left': '10%',
'top': '355px'
})Tak by to chyba miało wyglądać. Nie działać może bo może position nie jest ustawione odpowiednio? Powinno być raczej absolute.
A co do zmiany stylu nie w jquery to przecież można to zrobić w czystym js przy pomocy getElementByID.
RE: Da się zoptymalizować kod JS? - kbzium - 23-09-2011
jest absolute
Ok zrobiłęm najprościej jak się da przez setInterval i po prostu przesuwanie i i tak żżera 14% co prawda przy włączonym Cool and Quiet w procesore i 800MHz taktowania, ale to i tak za dużo...
RE: Da się zoptymalizować kod JS? - Kartofelek - 23-09-2011
normalnie w czystym js to ustawiasz style.left = 10 + "px" (bo niektore przeglądarki są walnięte w tej kwestii)
ale do tego spokojnie jquery mozesz uzyc. na czysto mozesz sprobowac animacje zrobic.
A najlepiej jakbys wykorzystal do tego canvas
