CSS
Performance

Verwenden Sie Transformation und Deckkraft, um das Trigger-Layout zu vermeiden

Wenn Sie einige CSS-Attribute ändern, wird der Browser dazu gezwungen, Stil und Layout synchron zu berechnen. Dies ist eine schlechte Sache, wenn Sie mit 60fps animieren müssen.

NICHT

Animieren Sie mit dem left und top Trigger-Layout.

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

Das Demo benötigte 11,7 ms für das Rendern, 9,8 ms für das Malen

TUN

Animieren Sie mit der gleichen Animation mit transform .

#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 dieselbe Animation, nahm 1,3 ms für das Rendern, 2,0 ms für das Malen.