CSS
Prestatie

Gebruik transformatie en dekking om triggerlay-out te voorkomen

Als u een CSS-kenmerk wijzigt, zal de browser de stijl en lay-out synchroon berekenen, wat een slechte zaak is als u moet animeren met 60 fps.

DO NOT

Animeer met de left en top trigger-indeling.

#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;
}

Demo duurde 11.7ms voor het renderen, 9.8ms voor het schilderen

DOEN

Animeer met transform met dezelfde animatie.

#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);
}

Demo dezelfde animatie, duurde 1.3ms voor rendering, 2.0ms voor schilderen.