[performance] CSS3 전환 : “전환 : 모두”가 “전환 : x”보다 느립니까?

Program / 글쓴이

css3 전환 속성의 렌더링 속도에 대한 질문이 있습니다.

여러 요소가 있다고 가정합니다.

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

하나의 선언을 사용하여 모든 요소에 대한 모든 전환을 대상으로 지정하는 것이 훨씬 더 효율적 div, span, a {transition: all}입니다. 하지만 내 질문은 각 요소의 특정 전환 속성을 대상으로하는 애니메이션 렌더링의 부드러움과 빠르기 측면에서 “더 빠를”것입니다. 예를 들면 :

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

이것에 대한 내 논리는 CSS “엔진”이 요소에 대해 하나의 단일 속성이 있더라도 “모든”전환 속성을 검색해야한다면 속도가 느려질 수 있다는 것입니다.

그게 사실인지 아는 사람 있나요? 감사!

답변

예, 사용 transition: all하면 성능이 크게 저하 될 수 있습니다. 색상 변경, 치수 변경 등과 같이 사용자가 볼 수 없더라도 전환이 필요한 경우 브라우저가 보이는 경우가 많이있을 수 있습니다.

제가 생각할 수있는 가장 간단한 예는 다음과 같습니다. http://dabblet.com/gist/1657661 — 확대 / 축소 수준이나 글꼴 크기를 변경하면 모든 것이 애니메이션으로 표시되는 것을 볼 수 있습니다. 이러한 사용자 상호 작용이 많지만 일부 블록에서 리플 로우 및 다시 그리기를 유발할 수있는 인터페이스 변경이있을 수 있으며, 이는 브라우저에 이러한 변경 사항을 애니메이션화하도록 지시 할 수 있습니다.

따라서 일반적으로를 사용하지 transition: all않고 대신 직접 전환을 사용하는 것이 좋습니다.

all페이지로드시 애니메이션 스플래시 와 같이 전환에 문제가 발생할 수있는 다른 것들이 있습니다 . 처음에는 블록의 초기 스타일을 렌더링 한 다음 애니메이션으로 스타일을 적용합니다. 대부분의 경우 원하는 것이 아닙니다. 🙂

답변

all두 개 이상의 규칙에 애니메이션을 적용해야하는 경우 에 사용해 왔습니다 . 예를 들어, color& background-coloron :hover.

그러나 전환에 대해 둘 이상의 규칙을 대상으로 지정할 수 있으므로 설정 에 의존 할 필요 가 없습니다 all.

.nav a {
  transition: color .2s, text-shadow .2s;
}

답변