GPU 가속을 사용하여 최적화 렌더링 웹킷

Question

CSS3 및 translate3d를 테스트하기 위해 작은 애플리케이션을 개발합니다. 아이디어는 화면에 무작위로 움직이는 여러 개의 DIV를 렌더링하는 것입니다. 그것은 입자 시스템의 종류입니다. 아마도 WebGL이나 Canvas를 사용하여 더 나은 퍼포먼스를 얻을 수있을 것입니다.하지만 모바일 브라우저에서도 원활하게 작동하기를 원합니다. 따라서 DOM 조작이 퍼포먼스에 더 좋을 것이라고 생각했습니다.

당신은 내가하는 div 수를 늘리기 위해 가능한 최상의 성능에 도달하고 싶습니다이 url

에서 몇 시간 후 그 결과를 찾을 수 있습니다.

하지만 내 문제는 Chrome 또는 Safari에서 TimeLine을 사용할 때 발견 한 "렌더링 문제"입니다. 때때로 전체 페이지가 Safari iPhone 또는 Chrome Android + iPhone에서 인식 가능한 작은 지연을 생성하는 것으로 렌더링됩니다.

만약 여러분 중 하나가 어려움을 겪고 있다면 나는 많은 것을 시도했지만 비싼 다시 그리기를 피하는 방법을 찾지 못했습니다.

동의어 중 하나 인 경우이 스 니펫을 최적화하기위한 추가 아이디어가있는 경우 언제든지 답장을 보내 주시기 바랍니다.

감사

---------- 나는 코드 (url를) 업데이트 Ariya의 조언을 바탕으로 UPDATE 1 ----------

다른 테스트를 추가 위쪽/왼쪽 만 사용합니다. Chrome에서 제공하는 FPS 카운터를 기반으로 거의 동일한 프레임 속도의 상단/왼쪽 속성을 사용하여 fps가보다 안정적임을 알 수 있습니다. 더 나은 공연을 위해 CSS3 버전을 최적화 할 수있는 아이디어가 있습니까? GPU 가속 기능이있는 css3은 더 빠를 것입니다.

---------- 업데이트 2 ----------

내가 requestAnimFrame를 사용하고 난 다시 그리기해야하는 경우에만 해고 내 코드를 업데이트했습니다. 그리고 내가 CSS에서 정의한 퍼포 레이션 그라데이션 배경을 죽이는 것이 자주 찾아 와서 성능을 저하시키는 것을 발견했습니다. 그러나 위쪽/왼쪽이 여전히 CSS 전환보다 우수합니다 (순수한 성능 관점에서)

Answer 1

Google 크롬의 개발자 도구에서 타임 라인 프로필을 볼 때 스타일 재 계산이 많이 있음을 알 수 있습니다. 이 특정 라인에서 비난하는 : 즉

 lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { .... 

지속적으로 스타일 시트를 변경하면 비용이다이 예에서 요소 애니메이션 주위를 이동보다는 키 프레임 기반의 애니메이션 I을 사용하는 방법에 대한이기 때문에. 간단하게 단순화하는 것이 좋습니다 전환.