Da się zoptymalizować kod JS?

[kbzium]

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(); });
                      
                });
        
}

[Kartofelek]

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

[kbzium]

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?

[benny]

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.

[kbzium]

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

[Kartofelek]

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