Tempi di decodifica immagine dallo strumento dev Timeline di Chrome

Question

Sto costruendo un sito Web a scorrimento parallasse (non siamo tutti) che, tra le altre cose, rivela un'immagine mentre l'utente scorre.

Ho eseguito la "rivelazione" posizionando l'immagine sullo sfondo e posizionando un div solido pieno sopra. Animare quindi questo div da 100% di altezza a 0% di altezza in base alla posizione di scorrimento, rivelando così l'immagine di sfondo.

Sto facendo questo genere di cose più volte e sfortunatamente sto rallentando.

Utilizzando la funzione Timeline integrata di Chrome, posso vedere che la maggior parte di questo rallentamento deriva da Decodifica immagine. Per quanto sopra rivela, sta decodificando l'immagine ogni fotogramma, che richiede 22ms per immagine per fotogramma.

Qualcuno sa quando il browser deve eseguire la decodifica dell'immagine e quando non lo fa? Mi sembra evidente che sarebbe necessario se ridimensionassi l'immagine, ma non che ne avrebbe bisogno quando coprirò a metà l'immagine?

Grazie per il vostro aiuto.

Answer 1

Come si anima la proprietà? Penso che potresti avere molte alternative alla semplice animazione dell'altezza (che è una sorta di ridimensionamento del contenitore).

Forse è meno intensivo limitarsi a "ritagliare" l'immagine di sfondo con un altro elemento. Ho trovato una discussione su StackOverflow con alcuni suggerimenti. Se si animano con javascript, purtroppo elementi pseudo sono nessuna opzione ...

Clip/Crop background-image with CSS

Answer 2

Ho lottato con questo problema molto anche. Finora non ho trovato nulla di concreto e la mia soluzione proposta non sembra funzionare in tutti i casi e non sono stato in grado di accertarne il motivo.

Comunque ...

sembra che quando si anima un elemento solido sopra la parte superiore di un'immagine, cromo forza un recode dell'immagine.

Ci sono due cose che ho provato e per la maggior parte hanno avuto successo.

1. Se si aggiunge -webkit-transform : translate3d(0,0,0) per l'elemento di copertura, si dovrebbe trovare la maggior parte, se non tutta l'immagine decodifica scomparire.

2. Se aggiungere il CSS precedente all'elemento di copertura non è di aiuto, provare ad aggiungerlo all'immagine, oppure provare ad aggiungerlo a entrambi gli elementi.

mia comprensione è che usando la proprietà CSS 3d che spinge l'immagine in un proprio livello composito che viene memorizzato nella cache e gestita dalla GPU, piuttosto che il renderer software browser.

90% del tempo in cui ho trovato una delle suddette combinazioni riuscita. Spero possa essere d'aiuto.