Ho un sito su cui sto lavorando per un cliente di grandi dimensioni con un'immagine sfocata sullo sfondo del paesaggio urbano con circa 20 elementi di luci tremolanti simulati sullo sfondo. Mentre capisco che le prestazioni dello sbiadimento riescono a scoppiare, ho pensato che 19 elementi non sarebbero stati male. Mi sbagliavo.fadeIn/out molti (20 o così) elementi contemporaneamente causando enormi risultati di prestazioni. Soluzione?
Così com'è in questo momento ogni elemento gestisce in modo ricorsivo la sua frizzante come questo:
function sparkle(flag, time) {
if (flag) {
setTimeout(function() {
self.fadeIn(getRandomInt(250,1000), function() {
sparkle(!flag, getRandomInt(250,1000));
});
}, time);
} else {
setTimeout(function() {
self.fadeOut(getRandomInt(250,1000), function() {
sparkle(!flag, getRandomInt(250,1000));
});
}, time
}
}
quando corro 20 di questi tutti andando a velocità diverse il calo di prestazioni è estrema. Il problema è che questo sito deve passare a IE7 (abbiamo una funzione fadein/out personalizzata per questo) quindi mi rimangono poche opzioni.
La mia risposta immediata è quella di verificare il supporto per la transizione opsity css e convertire la dissolvenza in entrata e in uscita nelle transizioni css dove disponibile che dovrebbe essere molto più veloce nei browser moderni (e averli appena accesi/spenti in ie7 con nessuna dissolvenza). Mi chiedevo se ci fosse un modo per ottimizzare lo stile originale per farlo eseguire molto più velocemente. Sto assumendo che il numero eccessivo di scricchiolii e le richiamate vengano eseguite per elemento per determinare il tasso di dissolvenza nel tempo che è responsabile dei risultati delle prestazioni. C'è comunque un elemento in grado di far sbiadire che il resto possa basarsi sul proprio offset (se questo ha senso)?
tenta di eliminare la ricorsione. – akonsu
fadeIn e fadeOut differiscono anche se è un po 'sciatto –
Questo normalmente non dovrebbe essere un problema, sei sicuro che i timeout non fanno eseguire queste funzioni migliaia di volte? Inserire un console.log all'interno della funzione e vedere con quale frequenza registra, – adeneo