Ripetizione della rasterizzazione dei livelli compositi alla modifica della scala

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

A partire da Chrome 53, tutti i contenuti vengono nuovamente rasterizzati quando cambia la scala della trasformazione, se non ha la proprietà CSS will-change: transform. In altre parole, will-change: transform significa "animali velocemente".

Questo vale solo per le scale di trasformazione che avvengono tramite la manipolazione dello script e non si applica alle animazioni CSS o alle animazioni web.

Ciò significa che probabilmente il tuo sito avrà contenuti più belli, ma potrebbe anche essere più lento senza alcune semplici modifiche descritte di seguito.

Implicazioni per gli sviluppatori web

In base a questa modifica, si può considerare will-change: transform come forzare la rasterizzazione dei contenuti in una bitmap fissa, che in seguito non viene mai modificata durante gli aggiornamenti della trasformazione. In questo modo gli sviluppatori possono aumentare la velocità di trasformazione delle animazioni su quella bitmap, ad esempio spostandola, ruotandola o scalandola.

Non distinguiamo tra trasformazioni di scala e di traduzione.

Inserisci will-change: transform negli elementi quando hai bisogno di velocità di trasformazione molto elevate (in altre parole, 60 f/s) e non si prevede che il rastering dell'elemento in alta qualità in ogni frame sia abbastanza veloce. In caso contrario, evita will-change: transform.

Per ottimizzare il compromesso tra qualità del rendimento, ti consigliamo di aggiungere will-change: transform all'inizio delle animazioni e rimuoverlo alla fine. Tuttavia, tieni presente che l'aggiunta o la rimozione di will-change: transform spesso comporta un costo elevato una tantum in termini di prestazioni.

Ulteriori considerazioni sull'implementazione

La rimozione di will-change: transform comporta la nuova rasterizzazione dei contenuti su larga scala, ma solo al frame dell'animazione successivo (tramite requestAnimationFrame). Pertanto, se è presente un livello con will-change: transform e vuoi semplicemente attivare un nuovo raster ma poi continuare a animare, devi rimuovere will-change: Transform, quindi aggiungerlo nuovamente in un requestAnimationFrame() callback.

Se in qualsiasi momento vuoi eseguire il raster con la scala corrente durante un'animazione, applica la tecnica precedente per rimuovere in un frame e poi aggiungi nuovamente will-change: transform in un frame successivo.

Ciò potrebbe avere l'effetto collaterale di perdere il livello composito dei contenuti, consolidando il consiglio di cui sopra. Se questo è un problema, ti consigliamo di aggiungere transform: translateZ(0) anche ai contenuti per assicurarti che rimanga in un livello composito durante questa operazione.

Riepilogo dell'impatto

Questa modifica ha implicazioni sulla qualità dei contenuti visualizzati, sulle prestazioni e sul controllo degli sviluppatori.

  • Qualità dei contenuti visualizzati: l'output visualizzato degli elementi che animano la scala della trasformazione sarà sempre nitido per impostazione predefinita.
  • Rendimento: l'animazione della trasformazione quando è presente will-change: transform sarà rapida.
  • Controllo degli sviluppatori: gli sviluppatori possono scegliere tra qualità e velocità, per singolo elemento e frame dell'animazione, aggiungendo e rimuovendo
    will-change: transform.

Per maggiori dettagli, vedi la documentazione a cui si fa riferimento nella progettazione sopra.

Esempi

In questo esempio, l'elemento con l'ID remainsBlurry rimarrà sfocato dopo questa modifica, ma quello con l'ID noLongerBlurry diventerà più nitido. Questo perché il primo ha una proprietà CSS will- change: transform.

Esempi di trasformazione di animazioni in scala da applicazioni reali