나는 꽤 무거운 (중간 무게보다는) canvas 작업이 진행되는 페이지가 있습니다. 모바일 장치 및 오래된 컴퓨터 사용자를 위해 캔버스 요소가 실제로 표시되는지 확인하고 상수 계산 및 캔버스 업데이트 (30fps에서 실행되는 애니메이션)를 수행해야하는지 여부를 결정하는 메커니즘을 구현할 수 있다고 생각했습니다. .브라우저는 뷰포트 안에 있지 않은 캔버스 요소를 렌더링합니까?
이것은 잘 작동하고 있지만 Chrome Dev Tools로 성능 테스트를 수행 할 때 가시성 검사를 사용 중지하고 문제가 발생한 기능의 CPU 사용량이 항상 렌더링되도록 할 때도 캔버스 요소 (들)의 어떤 부분도 보이지 않을 때 (이론적으로는 여전히 동일한 작업을 수행해야 함). 따라서 적어도 내 컴퓨터에서 Chrome 17을 실행하면 요소의 실제 가시성을 확인하면 실제로 차이가 발생하지 않습니다.
간략한 이야기를 요약하면 :이 작업을 수행해야합니까, 아니면 그러한 사례를 처리 할 수있을 정도로 똑똑하고 브라우저를 말하지 않고도 (그리고 가시성 검사를 저장할 수 있습니까?)?
편집는 :
그래서 나는이 주제에 대한 몇 가지 "연구"를 만들어 어떤 일이 것은 단지 초당 30 프레임 노이즈를 생성하는 것입니다 this fiddle.을 만들었습니다. 눈을 너무 기쁘게하지는 않지만, 음 ... 위쪽 부분은 뷰포트를 차단하는 단순한 div입니다. 아래로 스크롤하여 뷰포트에서 canvas 요소를 사용하면 CPU 사용량이 약 40 % 가량 걸린다는 것을 알 수 있습니다. 따라서 브라우저에서 여기에서해야 할 일이 많습니다. 위로 스크롤하면 위로 스크롤하여 내 뷰포트에 적색의 색갈색 div을 표시하고 CPU 사용량을 프로필하면 약 10 %까지 떨어집니다. 다시 아래로 스크롤하면 사용량이 다시 증가합니다. 내가 좋아하는 가시성 검사를 구현할 때
그래서이 modified fiddle에, 나는 캔버스 경우 확인하는 추가 작업이 있기 때문에 (대신 드롭의 CPU 사용량의 증가를 (작은 사람이 정직하기)를 참조 할 뷰포트 안에 있음).
나는 이것이 내가 알지 못하는 (또는 프로파일 링 할 때 큰 실수를하고있다) 일부 부작용이 있는지 또는 브라우저가 그러한 상황을 처리 할만큼 충분히 똑똑 할 것으로 기대할 수 있는지 궁금해하고있다.
누군가가 그 점을 밝힐 수 있다면 나는 매우 감사 할 것입니다!
와우, 그 슈퍼 철저한 대답에 너무 감사드립니다! 이전에'requestAnimationFrame'에 대해 들었 습니다만, 항상 그것에 관해 나를 괴롭힌 것은 60fps에서 실행되는 애니메이션을 목표로하는 것입니다 (많은 종류의 애니메이션에서 너무 부드럽게 보임). 이것을 제한하는 유일한 방법은'setInterval'을 다시 한번 포함하는 것입니다. .... 제한/변경하는 방법이 있는지 알고 있습니까? – m90
너무 부드럽습니까? 너무 매끄러운 애니메이션을 들어 보지 못했는데, 그게 뭐가 잘못 됐어? : S – AshleysBrain
나는 이상하게 들릴지 모르지만 고전 애니메이션에 대한 배경 지식을 가지고 있기 때문에 나는 이것이 지금까지 내 뇌의 일부라고 생각하는 12fps로 생각한다. 이의 제기가 95 %의 경우에 어리석은 일 이겠지만, 어떤 경우에는 더 많은 통제가 필요합니다. – m90