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 rasterizzati di nuovo quando la scala della trasformazione cambia, se non hanno la proprietà CSS will-change: transform. In altre parole, will-change: transform significa "anima velocemente".

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

Ciò significa che il tuo sito avrà probabilmente 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, will-change: transform può essere considerato come un'imposizione della rasterizzazione dei contenuti in una bitmap fissa, che successivamente non cambia mai in base agli aggiornamenti della trasformazione. In questo modo, gli sviluppatori possono aumentare la velocità delle animazioni di trasformazione della bitmap, ad esempio spostarla, ruotarla o scalarla.

Non facciamo distinzione tra le trasformazioni di scala e di traduzione.

Inserisci will-change: transform negli elementi quando hai bisogno di velocità di animazione molto elevate (in altre parole, 60 fps) e si prevede che il rasterizzazione dell'elemento ad alta qualità su ogni frame non sia sufficientemente veloce. In caso contrario, evita will-change: transform.

Per ottimizzare il compromesso tra prestazioni e qualità, ti consigliamo di aggiungere will-change: transform all'inizio delle animazioni e di rimuoverlo al termine. Tieni presente, tuttavia, che spesso l'aggiunta o la rimozione di will-change: transform comporta un notevole costo una tantum per il rendimento.

Considerazioni aggiuntive sull'implementazione

La rimozione di will-change: transform comporta la rasterizzazione dei contenuti a una scala nitida, ma solo nel frame di animazione successivo (tramite requestAnimationFrame). Pertanto, se hai un livello con will-change: transform e vuoi semplicemente attivare un nuovo raster, ma poi continuare l'animazione, devi rimuovere will-change: transform e aggiungerlo di nuovo in un requestAnimationFrame() callback.

Se in qualsiasi momento durante un'animazione vuoi eseguire il rastering alla scala corrente, applica la tecnica descritta sopra per rimuovere will-change: transform in un fotogramma e aggiungerlo di nuovo in un fotogramma successivo.

Ciò potrebbe avere l'effetto collaterale di far perdere ai contenuti il livello composito, in modo che il consiglio riportato sopra sia un po' costoso. Se questo rappresenta un problema, ti consigliamo di aggiungere transform: translateZ(0) anche ai contenuti per assicurarti che rimangano in un livello composito durante questa operazione.

Riepilogo dell'impatto

Questa modifica ha implicazioni per la qualità dei contenuti visualizzati, le prestazioni e il controllo degli sviluppatori.

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

Per ulteriori dettagli, consulta il documento di progettazione a cui si fa riferimento qui sopra.

Esempi

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

Esempi di animazioni di trasformazione della scala da applicazioni reali