Animációk és átmenetek: a 60 FPS megőrzése

A folyamatos animáció 60 képkocka per másodperc sebességet igényel, ami pontosan 16,67 milliszekundum képkockánként a böngészőben minden alkalommal. Csak két CSS tulajdonság animálható ezen a kereten belül főszál-blokkolás nélkül: a transform és az opacity érték a stíluslapban. Ezek külön kompozit rétegre kerülnek a GPU-n, ami felgyorsítja a renderelést mérhetően minden eszközön. A top, left, width, height animálása layout újraszámolást indít, ami minden képkockánál ismétlődik feleslegesen lassítva. A will-change CSS tulajdonság előre jelzi a böngészőnek a változás várhatóságát, de túlhasználata memóriaproblémát okoz. A requestAnimationFrame API a JavaScript-alapú animációkhoz a böngésző repaint ciklusához igazítja a kódot pontosan. A teljesítményt a DevTools Performance fülén ellenőrizhető.