CSS3에서 하드웨어 가속을 활성화하면 성능이 저하되는 이유는 무엇입니까?

난에서 전환 사용하여 CSS3 실험에 6000 개 작은 DIV 요소를 이동하고 top: 0로 top: 145px테스트 성능을.

하드웨어 가속을 사용 하지 않으면 Chrome에서 원활하게 실행됩니다.

translateZ(0)성능을 통해 하드웨어 가속을 활성화 하면 끔찍해집니다.

왜 이렇게이다?

다음은 내 예제 코드입니다. http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

업데이트 (2014-11-13) :이 질문이 여전히 주목을 받고 있기 때문에 언급 된 끊김 현상이 최신 하드웨어에 제공된 데모 에서 더 이상 표시되지 않을 수 있지만 문제 자체가 여전히 존재하는 것 같다는 점을 지적하고 싶습니다 . 이전 장치는 여전히 성능 문제를 볼 수 있습니다.

나는 항상 추가한다 :

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

3D 변환으로 작업 할 때. "가짜"3D 변환도 가능합니다. 경험에 따르면이 두 줄은 특히 iPad뿐만 아니라 Chrome에서도 항상 성능을 향상시킵니다.

나는 당신의 모범을 테스트했고, 내가 말할 수있는 한 작동합니다.

질문의 "왜"부분은 ... 모르겠습니다. 3D 변환은 젊은 표준이므로 구현이 고르지 않습니다. 그것이 바로 베타 테스트를 위해 접두사 속성 인 이유입니다. 누군가 버그 보고서 나 질문을 작성하고 팀이 조사하도록 할 수 있습니다.

2013 년 8 월 19 일 수정 :

이 답변에 대한 정기적 인 활동이 있으며 IE10에도 이것이 필요하다는 것을 알았습니다. 그러니 잊지 마세요 :

backface-visibility: hidden;
perspective: 1000;

널 변환 핵 ( translateZ(0)) 을 추가했을 때 애니메이션이 느려진 이유 는 각 널 3D 변환이 새 레이어를 생성하기 때문입니다. 이러한 레이어가 너무 많으면 브라우저가 GPU에 많은 텍스처를 보내야하기 때문에 렌더링 성능이 저하됩니다.

이 문제는 2013 년에 Apple 홈페이지에서 발견되었으며 null transform hack을 악용했습니다. 참조 http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/를

OP는 또한 댓글 에서 설명을 올바르게 발견했습니다 .

모든 3D 가속 레이어를 GPU로 전송해야하기 때문에 3D 가속을 사용할 때 작은 항목을 많이 옮기는 것보다 큰 물체를 몇 개 옮기는 것이 더 성능이 좋습니다. 따라서 GPU가 잘 작동하더라도 많은 객체의 전송이 문제가 될 수 있으므로 GPU 가속을 사용하는 것이 그만한 가치가 없을 수 있습니다.

흥미 롭군. 에서 몇 가지 옵션 about:flags, 특히 다음 옵션을 사용해 보았습니다 .

모든 페이지에서 GPU 합성 GPU 가속 레이어를 포함하는 페이지뿐만 아니라 모든 페이지에서 GPU 가속 합성을 사용합니다.

GPU 가속 그리기 합성이 활성화 된 경우 페이지 콘텐츠의 GPU 가속 그리기를 활성화합니다.

GPU 가속 캔버스 2D GPU (Graphics Processor Unit) 하드웨어를 사용하여 렌더링하여 2D 컨텍스트로 캔버스 태그의 성능을 높일 수 있습니다.

그것들을 활성화하고, 시도했고, 체크 박스가 활성화 된 상태에서 비참하게 실패했습니다 (당신처럼). 하지만 또 다른 옵션을 발견했습니다.

FPS 카운터 하드웨어 가속이 활성화 된 경우 페이지의 실제 프레임 속도를 초당 프레임 수로 표시 합니다.

플래그 설명의 하이라이트를 감안할 때 위의 옵션이 켜져있는 FPS 카운터를 보았 기 때문에 확인란을 선택하지 않아도 하드웨어 가속이 실제로 켜져 있다고 추측합니다!

요약 : 하드웨어 가속은 결국 사용자 기본 설정입니다. 더미로 강제하면 translateZ(0)중복 처리 오버 헤드가 발생하여 성능이 저하되는 것처럼 보입니다 .

크롬에서 chrome : // flags를 확인하십시오. 그것은 말한다

"스레드 합성이 활성화되면 가속화 된 CSS 애니메이션이 합성 스레드에서 실행됩니다. 그러나 합성 스레드 없이도 가속화 된 CSS 애니메이션으로 실행하면 성능이 향상 될 수 있습니다."

내 경험은 GPU가 모든 종류의 그래픽에 대해 일반적으로 더 빠르지는 않다는 것입니다. 매우 "기본"그래픽의 경우 더 느릴 수 있습니다.

이미지를 회전하는 경우 다른 결과를 얻을 수 있습니다. 이것이 GPU가 잘하는 일입니다.

또한 translateZ (0)은 3 차원 작업이고 위쪽 또는 왼쪽 변경은 2 차원 작업입니다.

두 개의 데모를 봤는데 혼란스러운 이유를 알고있는 것 같습니다.

1. 애니메이션 요소 왼쪽이나 위쪽을 사용하여 위치를 변경하지 말고 -webkit-transform을 사용하십시오.
2. 모든 자식 요소는 translateZ () 또는 translate3D 사용과 같은 하드웨어 가속을 켜야합니다.
3. FPS는 애니메이션 유창성을 측정하며 데모 FPS는 평균 20FPS에 불과합니다.

위는 개인적인 의견입니다. 감사합니다!