Raphael에서 requestAnimationFrame을 호출하면 성능이 저하됩니까?

Question

나는 거의 50 %의 애니메이션을 Raphael.js에 많이 의존하는 꽤 많은 리소스를 필요로하는 웹 애플리케이션을 개발 중이다. 나머지는 웹 오디오 API의 컨텍스트와 함께 webkitRequestAnimationFrame을 사용하는 내 자신의 애니메이션 메소드를 굴렸다. .currentTime을 사용하여 오디오 구성 요소와 애니메이션을 동기화합니다.

나는 현재 매우 심한 성능을 경험하고 있으며 Raphael의 소스를보고 있으면 requestAnimationFrame도 사용하고 있음을 알 수 있습니다. 내가 경험하고있는 지연의 대부분은 내 애니메이션과 Raphael 's가 동시에 실행될 때 발생하는 것으로 보입니다. requestAnimationFrame은 기본적으로 인출주기 당 두 번 호출되기 때문에입니까?

본질적으로 내가 묻는 것은 기본적으로 래퍼 객체에 대한 내 애니메이션 구현을 다시 롤업해야하며 기존의 requestAnimationFrame을 사용하고 있습니까?

Answer 1

Hmmm 내가 아는 한 RAF의 모든 점은 모든 것이 동기화되어 다음 렌더링 업데이트를 준비합니다. 나는 이것이 당신의 전부 요점 일 때 당신과 똑같이하고있을 것입니다.

사양으로 당

:

기대는 사용자 에이전트가 디스플레이의 재생 빈도를 일치하는 일정한 간격으로 애니메이션 작업 소스에서 작업을 실행하는 것입니다. 더 낮은 속도로 작업을 실행하면 애니메이션이 부드럽게 나타나지 않을 수 있습니다. 높은 속도로 작업을 실행하면 사용자가 볼 수있는 이점없이 계산이 추가로 발생할 수 있습니다.

그래서 성능 저하가 없어야합니다.

Answer 2

부진한 SVG 애니메이션과 비슷한 문제가 있습니다. RAF에 대한 나의 이해는 그것이 어디에서 왔는지에 관계없이 업데이트를 일괄 적으로 처리한다는 것입니다. 그래서 당신의 문제라고 생각하지 않습니다.

나는 내 사이클의 대부분이 다시 칠하는 것으로 나타났습니다. JS를 사용하면 다시 칠하는 속도가 빨라지는 경우는 많지 않습니다. 그러나 투명 효과, 필터 및 화면의 넓은 영역을 줄임으로써 브라우저에서 더 쉽게 사용할 수 있다고 생각합니다. 또한 다시 그리는 것은 업데이트중인 픽셀의 양에 따라 달라집니다. 나는 풀 스크린 사이트를 만들고 있는데 뷰포트 크기를 두 배로 늘리면 페인트 시간이 두 배로 늘어납니다.