CSS
Występ

Użyj transformacji i krycia, aby uniknąć układu wyzwalacza

Zmiana niektórych atrybutów CSS spowoduje, że przeglądarka zsynchronizuje obliczenie stylu i układu, co jest złe, gdy trzeba animować przy 60 klatkach na sekundę.

NIE

Animuj za pomocą left i top układu wyzwalacza.

#box {
  left: 0;
  top: 0;
  transition: left 0.5s, top 0.5s;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
}

#box.active {
  left: 100px;
  top: 100px;
}

Demonstracja zajęła 11,7 ms na renderowanie, 9,8 ms na malowanie

ROBIĆ

Animuj za pomocą transform z tą samą animacją.

#box {
  left: 0;
  top: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;

  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

#box.active {
  transform: translate3d(100px, 100px, 0);
}

Demonstracja tej samej animacji trwała 1,3 ms do renderowania, 2,0 ms do malowania.