휴대 기기의 CSS3 성능

Question

Google은 iPhone3 (3G + 4)에서 CSS3를 테스트 해본 결과 일부 성능 문제가 발생했습니다.

우리는 Webapp이 (가) 프로필 사진 + 추가 정보를 보여줍니다.

우리는 상자 (우리는 90 %의 상자를 숨길 기본값)이 있습니다

border: 1px solid #aaa; 
font-size: 11px; 
text-shadow: 0 1px 0 rgba(0,0,0,.75); 
box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-webkit-box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-moz-box-shadow: inset 0 0 40px rgba(255,255,255,.8); 
-moz-border-radius: 0 10px 0 0; 
-webkit-border-radius: 0 10px 0 0; 
border-radius: 0 10px 0 0; 

을 우리는 아래의 레이블 3 개 아이콘 있습니다

background: rgba(0,0,0,.5); 
padding: 3px; 
font-weight: bold; 
text-shadow: 0 1px 0 #000; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 

을

이제 애니메이션을 적용하면 gher Y position) 상자에서 애니메이션은 매우 느리고 부드럽 지 않습니다.

애니메이션을 부드럽게 만들려면 어떻게해야합니까?

추신. 아이폰 4S에서 좋은 실행 종료됩니다 (더 나은 CPU 때문에)

Answer 1

편집 : CSS3 전환으로 애니메이션을 적용한다고 가정 해 보겠습니다. 당신이 그렇지 않다면, 당신은 아마도 향상된 성능을 기대할 수 있습니다 ... 그것은 가치가 있습니다.

여기 웹킷이 정말로 두꺼운 박스 그림자를 다시 그려야한다는 것입니다. 이것은 큰 과제처럼 보이지 않지만, 처음부터 inset box-shadow를 제거했다면 놀라운 성능 향상을 보게 될 것이라고 생각합니다.

내 안드로이드 장치 (웹킷 기반 브라우저)에서 스크롤이 느려지고이 테스트를 통해 문제가 무엇인지 판단했습니다. 텍스트 그림자는 UI 유형 설정과 관련이 없습니다. 그라디언트도 꽤 중요하지 않았습니다. 박스 - 섀도우를 한 번 치면, 블러 반경을 픽셀 단위로 제거 할 때 거의 선형적인 성능 향상을 보았습니다.

예를 들어, 6px 반경은 큰 div에서 렌더링하는 데 80ms가 걸렸을 수 있습니다. 3px로 가져온 경우 렌더링 시간은 40ms에 가깝습니다. 2px, 약 20ms.

상자 그림자를 뒤로 잡고 가능한 경우 이미지 만 사용하거나 작은 그림자를 사용하는 것이 좋습니다. Webkit이 로우 엔드 장치에서 초당 최소 20 회 UI를 다시 칠할 수있는 지점에 도달하면 아마 괜찮을 것입니다.

분명해 보일 수 있습니다. 렌더링 품질에 대한 옵션은 없으므로 (예를 들어)이 기능을 실제로 최적화 할 수는 없습니다 ... 모바일 장치의 경우 실제로 할 수있는 것은 효과를 억제하고 제한 사항에 따라 아트 작업을 최적화하는 것입니다 .