CSS 애니메이션 성능 최적화

1. CSS, jquery, 캔버스를 사용하여 애니메이션 만들기

1. Canvas

장점: 우수한 성능, 강력함, 대부분의 브라우저(IE6, IE7, IE8 제외)를 지원하며 그려진 그래픽을 다음과 같이 직접 저장할 수 있습니다. .png 또는 .jpg 그래픽

단점: 그래픽은 스크립트를 통해서만 그릴 수 있으며, 캔버스에 프로그래밍 방식으로 표시되는 텍스트는 실제로 애니메이션용 API가 없습니다. bitmap 이므로 검색 크롤러는 텍스트를 완전히 무시합니다. 스크린 리더에서는 텍스트 콘텐츠도 인식되지 않습니다.

2, css3

장점: 간단하고 콘텐츠와 분리되어 있으며 CSS 애니메이션은 레이아웃 및 페인트를 트리거하지 않습니다. (이러한 속성을 수정하면 레이아웃 및 페인트가 트리거되지 않습니다: 뒷면 가시성, 불투명도, 원근, 원근 원점, 변환)

단점: 브라우저 호환성 문제가 있고 Android 휴대폰에서는 지연이 발생할 수 있으며 전체 페이지의 DOM 구조와 밀접하게 관련된 조판 엔진에 의해 제한됩니다.

3. JQuery

장점: 호환성 문제 없음

단점: 모든 프레임을 다시 칠하고 다시 구성해야 합니다(매우 시간이 많이 소요됨).

요약: 모바일 애니메이션 효과 측면에서 CSS3 애니메이션을 사용하는 것이 jquery 애니메이션보다 낫습니다. 훨씬 더 효율적입니다. 특히 안드로이드 폰에서 그 성능이 확연히 드러납니다! 따라서 모바일 애니메이션은 CSS3 애니메이션보다 우선순위가 높으며, jquery는 단순히 애플리케이션 로직을 처리하는 데에만 사용할 수 있습니다. CSS3 애니메이션은 콘텐츠 레이아웃에 특수 효과를 추가하기 위한 일반적인 솔루션이지만 성능이 낮은 모바일 브라우저에서는 레이아웃 성능에 의해 제한될 가능성이 높으며 원하는 효과를 얻을 수 없습니다. 게임과 같이 성능이 필요한 특정 시나리오의 경우 캔버스가 크게 개선됩니다.

(추천 튜토리얼: CSS Getting Started Tutorial)

2. CSS3는 모바일 단말에서 렉 문제가 있습니다.

css3로 제작한 애니메이션은 iOS에서는 66으로 실행되지만 안드로이드에서는 가끔 렉이 발생합니다. 다음 사항에서 문제를 찾아볼 수도 있습니다.

a. 레이아웃이 발생하는지 여부

그렇다면 애니메이션 요소를 최대한 절대화하거나 고정하여 문서 트리에 영향을 주지 않도록 하여 리플로우를 줄이세요.

b. 하드웨어 가속 활성화 여부

"CSS3 애니메이션이 사용됩니다. " 및 " "하드웨어 가속이 켜져 있음"은 두 가지 다른 사항이지만 전자가 후자의 원인이 될 수 있습니다.
웹킷에서 하드웨어 가속을 활성화하면 마법의 만병통치약인 opacity: 1; 또는 -webkit-backface-visibility: Hidden;이 있습니다.

c. 비용이 많이 드는 속성(css 그림자, 그라데이션, 배경 첨부: 고정 등)이 있는지 여부

그렇다면 사진도 옵션입니다. 이는 시간과 공간을 교환하는 최적화라고 볼 수 있습니다.

d, 영역 다시 그리기

그렇다면 애니메이션 영역을 줄여야 합니다. 이 단계의 최적화는 제한적입니다.

e, 애니메이션을 생성하려면 변환을 사용하고 다음 예제 1과 2와 같이 높이, 너비, 여백, 패딩 등을 사용하지 마세요.

PS: 변환을 사용하면 브라우저는 이 요소의 비트맵을 한 번만 생성하고 애니메이션이 시작될 때 처리를 위해 GPU에 제출하면 됩니다. 그 후에는 브라우저에서 비트맵 작업의 레이아웃, 그리기 및 제출을 수행할 필요가 없습니다. 결과적으로 브라우저는 GPU의 기능을 최대한 활용하여 다양한 위치에 비트맵을 빠르게 그리고 회전 또는 크기 조정을 수행할 수 있습니다. 간단히 말해서 변환 애니메이션은 GPU에 의해 제어되고 하드웨어 가속을 지원하며 소프트웨어 렌더링이 필요하지 않습니다

3. 애니메이션 프로세스 중에 깜박임이 있습니다(보통 애니메이션 시작 부분에 발생함)

해결 방법:

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

웹킷 커널에서 찾아보기 브라우저에서 또 다른 효과적인 방법은 다음과 같습니다:

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

권장 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS 애니메이션 성능 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!