Stiamo cercando, da un paio di uscite, di trovare dei metodi per migliorare le tempistiche di painting della pagina, cercando di prioritizzare il repaint rispetto al reflow.

Questi meccanismi CSS si attivano quando uno stile viene applicato ad un elemento. Dunque, per arrivare all'obiettivo, dobbiamo conosce quali proprietà necessitano una o l'altra metodologia. Il reflow è richiesto da: width, height, padding, margin, top-left-bottom-right. Quelle che invece non ne hanno bisogno sono: transform, opacity, visibility.

Detto ciò, possiamo già ottimizzare il CSS. Nel prossimo box troviamo un esempio che utilizza transform, ma possiamo avvalerci dello stesso approccio per nascondere un elemento dalla pagina utilizzando opacity.

.box {
  transition: left 0.3s ease;
  position: relative;
}
.box:hover {
  /* spostamento che richiede reflow */
  left: 20px;
}

.box {
  transition: transform 0.3s ease;
}
.box:hover {
  /* spostamento che NON richiede reflow */
  transform: translateX(20px);
}

A valle di questa modifica, se la trasformazione è ricorrente, come nel caso di questo box o di un bottone mostrato in più punti della pagina, si può chiedere al browser di prepararsi a questa eventualità con will-change, in modo da ottimizzare ulteriormente i tempi.

.box {
  will-change: transform;
}

Attenzione a non abusare di questa proprietà perchè va ad appesantire il lavoro della CPU, dato che il browser tiene traccia di tutti gli elementi su cui viene predisposta.