Optimaliausias variantas skaidrėms, patarkit

Sveiki, tikiuosi sulaukti patarimo iš tų, kurie žino kaip optimizuoti procesą, kad būtų sumažintas lagas svetainėje.

Turiu slideshow pasidaręs, jis yra labai paprastas, nes reikia vengti kuo daugiau jquery. Yra backgroundas, kurio judėjimas yra 12 kadrų per sekundę. Negalima naudoti flash, todėl tenka kiekvieną kadrą karpyti ir naudoti kaip skaidrę. Pasidarius slideshow ir paleidus 12 kadrų per sekundę sulaukiamas nemažas lagas, nes kaip ir savaime suprantama, per sekundę užkrauti 12 skirtingų divų tikrai yra ką veikti. Todėl būtų klausimas, kaip teisingai optimizuoti, idant sumažinti lagą?

for example kodas, kurį naudoju:

$(".full_slider > div:gt(0)").fadeOut('fast');

setInterval(function() { 
 $('.full_slider > div:first')
   .fadeOut('fast')
   .next()
   .fadeIn('fast')
   .end()
   .appendTo('.full_slider');
},  83); // 83ms tai 12 kadrų per sekundę

Gal pabandyk tokiu atveju naudoti NodeJS ir viską atlikti serverio pusėj. Beja, gal parodysi daugiau kodo, nes dabar nelabai aišku kaip tiksliai darai? :)

Gal pabandyk tokiu atveju naudoti NodeJS ir viską atlikti serverio pusėj. Beja, gal parodysi daugiau kodo, nes dabar nelabai aišku kaip tiksliai darai? :)

<div class="full_slider" style="display: block;">
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>
                       <div style="background: url(***************) no-repeat center;"></div>

                   </div>         

ką turi omeny su nodeJS? gal kokį tinklapį žinai, kur yra pamokos to? (turiu omeny būtent slidehow)

šiaip galvoju sužaisti vien tik su CSS bet dar neturiu idėjų kaip tai padaryti :D

Su NodeJS pamokų nelabai žinau, bet gali daryti su CSS3 animacijom ir naudoti Sprites principą su savo pagrindiniu DIV :)

Su NodeJS pamokų nelabai žinau, bet gali daryti su CSS3 animacijom ir naudoti Sprites principą su savo pagrindiniu DIV :)

tiką žaidžiau su tai, nieko gero nesigavo, matyt per mažai žinau ;) eisiu ieškoti info, dėkui už nuomonę

Jai turėčiau daugiau info apie tai ką darai ir kaip turėtų veiktį tavo programa, tuomet galėčiau daugiau padėti :)

• http://ruseller.com/lessons.php?rub=32&id=1456
• http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

Jai turėčiau daugiau info apie tai ką darai ir kaip turėtų veiktį tavo programa, tuomet galėčiau daugiau padėti :)

• http://ruseller.com/lessons.php?rub=32&id=1456
• http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

mano užduotis buvo padaryti backgroundą sectionui, kuris keistųsi 12 kartų per sekundę. Yra 12 skirtingų paveiksliukų, kurie pasikeičia per vieną sekundę. Užduotis atlikta, bet deja, veikia ne optimaliai. Tai paprastas divas, kurio backgroundas keičiasi automatiškai

mano užduotis buvo padaryti backgroundą sectionui, kuris keistųsi 12 kartų per sekundę. Yra 12 skirtingų paveiksliukų, kurie pasikeičia per vieną sekundę. Užduotis atlikta, bet deja, veikia ne optimaliai. Tai paprastas divas, kurio backgroundas keičiasi automatiškai

Paveiksliukuos yra kas nors konkretaus ar galima ir su CSS perdaryti, o gal pavyktų gif animaciją naudoti? dar gali bandyti su CSS3 animacijom pasidaryti, tik paveiksliukus reikės kešinti :)

Paveiksliukuos yra kas nors konkretaus ar galima ir su CSS perdaryti, o gal pavyktų gif animaciją naudoti? dar gali bandyti su CSS3 animacijom pasidaryti, tik paveiksliukus reikės kešinti :)

galima ir su gif, bet nenoriu dizainerio kalbinti dar. Su css deja, bet neišeis padaryti, bandžiau vieną nupaišyti, tai per daug laiko užtruko, nebloga grafika ten :D o dėl kešavimo jau seniai galvoju, bet vistiek apkrova jausis pirmą kartą užėjus. Ieškosiu dar alternatyvų

Niekaip nesuprantu, kam skaidrėm background reikia keisti 12x per sekundę Bandyk optimizuoti paveiksliukus ir konvertuok į Sprite :)

Praeitais metais rašiau savo bakalaurinį darbą šia tema, apie HTML5/JS animaciją ir Flash animaciją. Geriausias būdas yra padaryti spritesheet'ą, o paprastas animacijas (koordinačių pakeitimas, pasukimas ir pan.) atlikti su JS'u. Sprite'o dalis naudoti tik kai nesigauna arba pasidaro per daug komplikuota suktis su JS'u. Šiaip labai gerai su tuo susidoroja Google Swiffy - uploadin'į Flash'ą su paprasta animacija (ištikrųjų ir su gan sudėtingom normaliai susidoroja) - ir išspjauna html'inę tavo animacijos versiją. Suoptimizuotą ir paruoštą naudojimui. Kai dariau tyrimus, tai šito būdo perfomance'as skirtingose naršyklėse buvo apie 200 (du šimtai) kartų našesnis, negu tiesiog sprite'ų ir jų judinimas div'o atžvilgiu. Jeigu bus įdomu ir turi noro pasigilint (daug puslapių ten) - brukštelk, gal kur nors dar atkapstysiu tą savo darbą ir tyrimą :)

Praeitais metais rašiau savo bakalaurinį darbą šia tema, apie HTML5/JS animaciją ir Flash animaciją. Geriausias būdas yra padaryti spritesheet'ą, o paprastas animacijas (koordinačių pakeitimas, pasukimas ir pan.) atlikti su JS'u. Sprite'o dalis naudoti tik kai nesigauna arba pasidaro per daug komplikuota suktis su JS'u. Šiaip labai gerai su tuo susidoroja Google Swiffy - uploadin'į Flash'ą su paprasta animacija (ištikrųjų ir su gan sudėtingom normaliai susidoroja) - ir išspjauna html'inę tavo animacijos versiją. Suoptimizuotą ir paruoštą naudojimui. Kai dariau tyrimus, tai šito būdo perfomance'as skirtingose naršyklėse buvo apie 200 (du šimtai) kartų našesnis, negu tiesiog sprite'ų ir jų judinimas div'o atžvilgiu. Jeigu bus įdomu ir turi noro pasigilint (daug puslapių ten) - brukštelk, gal kur nors dar atkapstysiu tą savo darbą ir tyrimą :)

žinoma, kad noriu! čia žinai, 200 kartų tai... vau... 200 kartų greičiau nei bet koks optimaliausias variantas! tikrai labai lauksiu tavo darbo, jei nerasi, tai nieko tokio, tikiuosi rasiu tame puslapyje ką nors

Pasidarius slideshow ir paleidus 12 kadrų per sekundę sulaukiamas nemažas lagas, nes kaip ir savaime suprantama, per sekundę užkrauti 12 skirtingų divų tikrai yra ką veikti.

Ne, IMO nėra. Vienas dalykas: jei yra tiek, kiek parodei kodo, nedaryk 12 div, o tiesiog backgroundus kaitaliok (turėt juos gali kur nors JS'e). Tokiu būdu galėsi dar ir užkešuoti selektorių. Nematau, kas čia gali trukti 83 ms... O jei vis tiek lagina – profilink, ar ką :)

var bgs = [..., ..., ...]
var pos = 0;

setInterval(function() {
   elemento_background = bgs[pos];
   pos = (pos+1) % bgs.length;
}, 83);

Tiesa, tik dabar pamačiau, kad reikia dar ir feidint – tam šiuo atveju gali pajungti CSS3 transitionus. Tiesiog, kaip sakiau, esmė ta, kad div'ų čia, IMO, nereikia.

Arba, manyčiau, feidinimą ant bg change galima padaryti ir su jQuery.

Gal pabandyk tokiu atveju naudoti NodeJS ir viską atlikti serverio pusėj. Beja, gal parodysi daugiau kodo, nes dabar nelabai aišku kaip tiksliai darai? :)

Ką čia darys node.js? :blink: Visas keitimas – vartotojo pusėje, bendravimas su serveriu nebent dar labiau sulėtintų darbą.

Bet jei ta animacija vis tiek yra HTML/JS/CSS, tai reikštų, kad įmanoma ir pačiam pasirašyti tą „200 kartų efektyvesnį“ – tik reikia gerai apgalvoti kodą :)

Bet jei ta animacija vis tiek yra HTML/JS/CSS, tai reikštų, kad įmanoma ir pačiam pasirašyti tą „200 kartų efektyvesnį“ – tik reikia gerai apgalvoti kodą :)

Taip. Skirtumas ir yra tarp to ar load'ini paveikslėlį į divą (nors ir jau užcache'intą), ar jau esamą bloką transformuoji. Tai tos transformacijos vyksta lengviau, negu paveikslėlio kaitaliojimas arba net sprite'o judinimas. O tas google'o tools'as labai protingai su tuo sužaidžia. Profailinau su jsperf.com, ir chrome'as šimtais kartų daugiau tranformacijų per sekundę gali įvykdyti, negu kad paveikslėlių kraut. Su FF ir IE tas skirtumas dar didėja (bent jau su tomis versijomis, kurios buvo prieš metus). Aišku čia ne tik nuo browser'ių priklauso, bet ir labai nuo CPU ir GPU, ir kas svarbiausia - nuo pačios animacijos. Jeigu pvz. ji labai sudėtinga transformacijų atžvilgiu, tai gali būti jog ir spraitais bus geriau, negu kad su JS/CSS transofrmuot. Bet anyway, spraitai (kai vienam paveikslėlyje jų daug sudėta vienas šalia kito ir tiesiog tą vieną judini backgrounde) tikrai geriau, negu atskiri paveikslėliai.

 

Bet jei ta animacija vis tiek yra HTML/JS/CSS, tai reikštų, kad įmanoma ir pačiam pasirašyti tą „200 kartų efektyvesnį“ – tik reikia gerai apgalvoti kodą :)

visada turi būti paprastas metodas tai padaryti, tavo pasiūlyta idėja man puikiai tiko, o dar ir šiek tiek paįvairinus ją sugebėjau panaikinti lagą. Kitaip tariant nemanau, kad įmanoma padaryti efektyviau. Bet yra kita problema, kadangi 12fps yra gana dažnas santykis, savaime suprantamas mirkčiojimo efektas, tik kažkodėl su chrome jo nesimato, o su mozilla jis matosi. Gal yra idėjų kaip su tuo kovoti? Ieškojau informacijos, bet visur tik siūlo keisti dažnį, daryti daugiau FPS, bet man tai netinka.

setInterval(function() {
   elemento_background = bgs[pos];
   pos = (pos+1) % bgs.length;

   $(".full_slider").empty(100);
   $(".full_slider").append('<div style="background: url(images/background/10_000' + elemento_background + '.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>');
}, 83);

Nežinau, kas per mirkčiojimas, bet mano patarimo iš esmės nepaklausei: nepernaudoji to paties div (vidinio), o kas 83 ms trini jį visiškai, tada kuri visiškai naują. :)

Nežinau, kas per mirkčiojimas, bet mano patarimo iš esmės nepaklausei: nepernaudoji to paties div (vidinio), o kas 83 ms trini jį visiškai, tada kuri visiškai naują. :)

bet ar tai iš esmės nėra tas pats? juk išvalyti esamo divo struktūrą tas pats kas jį ištrinti?

paklausiau tavo patarimo, pasidariau nenaikinant divo, bet nematau skirtumo :/

$(".full_slider").removeAttr('style');
   $(".full_slider").css({
       'background' : 'url(images/background/10_000' + elemento_background + '.jpg) no-repeat center',
       '-webkit-background-size' : 'cover',
       '-moz-background-size' : 'cover',
       '-o-background-size' : 'cover',
       'background-size' : 'cover'
   });

Nesakau, kad bus kažkoks mega skirtumas (ar kad aš išvis išeis į gerą pusę), bet tai nėra tas pats ir mano manymu turėtų tikrai būti greičiau modifikuoti tą patį objektą.

Pagalvok:

• Turi mašiną, ją perdažai, arba...
  
• Turi mašiną, ją numeti nuo skardžio, nusiperki naują kitos spalvos.
  
• Turi mašiną, ją numeti nuo skardžio, nusiperki naują tokios pat spalvos, kaip buvo, tada ją perdažai.
  

:)

http://jsperf.com/changing-element-vs-changing-attributes

Dar vienas dalykas. Kešuok selektorių – kiekvienoj eilutėj iš naujo ieškai elementų. Su ID gal netruktų ilgai, su klase jau kiek ilgiau.

slider = $(".full_slider");
slider.removeAttr("style");
slider.css({});

Aišku, jei trinant elementus, tai po to reiktų paselectint iš naujo, naujus elementus.

Nesakau, kad bus kažkoks mega skirtumas (ar kad aš išvis išeis į gerą pusę), bet tai nėra tas pats ir mano manymu turėtų tikrai būti greičiau modifikuoti tą patį objektą.

 

Pagalvok:

• Turi mašiną, ją perdažai, arba...
  
• Turi mašiną, ją numeti nuo skardžio, nusiperki naują kitos spalvos.
  
• Turi mašiną, ją numeti nuo skardžio, nusiperki naują tokios pat spalvos, kaip buvo, tada ją perdažai.
  

:)

 

http://jsperf.com/changing-element-vs-changing-attributes

 

Dar vienas dalykas. Kešuok selektorių – kiekvienoj eilutėj iš naujo ieškai elementų. Su ID gal netruktų ilgai, su klase jau kiek ilgiau.

slider = $(".full_slider");
slider.removeAttr("style");
slider.css({});

Aišku, jei trinant elementus, tai po to reiktų paselectint iš naujo, naujus elementus.

ačiū, tikrai tavo tiesa. Ir tas skirtumas gana nemenkas tokiame dideliame procese kaip mano, gaila, kad man vistik nepanaikina problemos su mirksėjimu. Tas kodas kaip suprantu yra optimizuotas greičiau veikti kaip tik gali būti, bet lagina vistiek, tikriausiai dėl to, kad per didelis veiksmų kiekis per sekundę bus

ačiū, tikrai tavo tiesa. Ir tas skirtumas gana nemenkas tokiame dideliame procese kaip mano, gaila, kad man vistik nepanaikina problemos su mirksėjimu. Tas kodas kaip suprantu yra optimizuotas greičiau veikti kaip tik gali būti, bet lagina vistiek, tikriausiai dėl to, kad per didelis veiksmų kiekis per sekundę bus

Nemanau, kad tame – jei duotum pilną live pavyzdį su mirksėjimu, gal ir galima būtų ką nors pažiūrėt.

Spraitą padaryk.

Kokio dydžio tas konteineris? Kiek ten išviso sekundžių ta animacija vyksta? Jeigu jis nėra ten kokiu 1000x1000 tai padaryk spritesheet'ą, tavo atveju manau tikrai pašalins mirksėjimą. O jeigu nesigauna sprite'o padaryti visai animacijai, tai bent po kažkiek kadrų į vieną paveikslėlį talpink.

Spraitą padaryk.

Kokio dydžio tas konteineris? Kiek ten išviso sekundžių ta animacija vyksta? Jeigu jis nėra ten kokiu 1000x1000 tai padaryk spritesheet'ą, tavo atveju manau tikrai pašalins mirksėjimą. O jeigu nesigauna sprite'o padaryti visai animacijai, tai bent po kažkiek kadrų į vieną paveikslėlį talpink.

jis dar didesnis nei 1000x1000 ir ciklas yra infinity

Jei gerai suprantu, kaip tu čia darai, tai mirksėjimas atsiranda dėl to, kad trumpą laiko tarpą tarp paveiksliuko pašalinimo ir naujo paveiksliuko uždėjimo tavo div'as yra tuščias. Kad taip nebūtų, reiktų naudoti du div'us vieną virš kito (pagal Z ašį): kol dar nebus rodomas naujas paveiksliukas, matysis po juo esantis senasis.

Jei gerai suprantu, kaip tu čia darai, tai mirksėjimas atsiranda dėl to, kad trumpą laiko tarpą tarp paveiksliuko pašalinimo ir naujo paveiksliuko uždėjimo tavo div'as yra tuščias. Kad taip nebūtų, reiktų naudoti du div'us vieną virš kito (pagal Z ašį): kol dar nebus rodomas naujas paveiksliukas, matysis po juo esantis senasis.

au ja, tikrai gera idėja :) net nebuvau sugalvojęs taip