requestAnimationFrame 가비지 수집

Chrome Dev Tools v27에서 타임 라인을 사용하여 다음 코드의 메모리 사용량을 프로파일 링합니다.requestAnimationFrame 가비지 수집

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv='content-type' content='text/html; charset=UTF-8' /> 
    <title>RAF</title> 
</head> 
    <body> 
    <script type='text/javascript' charset='utf-8'> 
     var frame = function() { 
     window.webkitRequestAnimationFrame(frame); 
     }; 
     window.webkitRequestAnimationFrame(frame); 
    </script> 
    </body> 
</html>

간단합니다. 하지만 결국 가비지 컬렉터가 메모리를 회수하고 있음을 나타내는 치아 패턴이 나타납니다.

Chrome Dev Tools Timeline

는 영국 공군 기본적으로 쓰레기 개체를 만들 수 있습니까? 이것을 피할 수있는 방법이 있습니까? 고마워. 내가 크롬이 문제가있을 수 있습니다 생각

출처

2013-06-29 Vince

관련. 이 분야에 잠재적 인 문제가있는 것으로 보입니다. 아마도이 전체 메모리 모니터링 도구의 출력을 소금으로 채우기를 권할 것입니다. 솔직히, 나는 이것의 무엇으로부터 결론을 내릴지 정말로 모른다. http://stackoverflow.com/questions/19395565/chrome-requestanimationframe-issues –

다른 사람이 기꺼이 똑같이하려고한다면 Im은 이번에 현상금을드립니다 :> 이미 두 가지 기능이있는 것이 도움이된다면 생각하고있었습니다. 플롭은 서로를 등록한다. –

은 ...

유사한 버그는 이미 여기에보고됩니다

https://code.google.com/p/chromium/issues/detail?id=120186

출처

2013-08-07 19:50:09

그것은 유지 사이클처럼 보인다. 프레임 자체를 호출하므로 보유 수를 보유하고 해제되지 않습니다. 또한 프로필, 타임 라인 또는 힙 스택으로 실행 코드를 모니터링 할 때마다 몇 가지 부작용이 발생할 수 있습니다.

어느 것이 든 나는 그것에 대해 걱정하지 않을 것입니다. 앱이나 페이지를 효율적으로 사용하려는 경우 해결해야 할 더 큰 문제가 있습니다. JS가 16ms 미만으로 완료되는 한 아무도 눈치 채지 못할 것입니다.

가장 큰 메모리/CPU 문제는 네트워크 호출, PNG/JPG 압축 해제, DOM 요소 생성 및 삭제, 비 작업자 스레드에서의 데이터 처리/파싱, GPU 텍스처 사용 불량, GC가 데이터를 수집하는 데 오랜 시간이 걸립니다.

Chrome에서 120FPS로 실행되는 1,000,000 개의 항목으로 스크롤 목록을 최적화 할 수있었습니다 (https://github.com/puppybits/BackboneJS-PerfView). 성능 도구는 사용자가 볼 수있는 가장 큰 문제를 찾는 데 도움이되며 사소한 일에 대해 걱정할 필요가 없습니다.

출처

2013-10-22 22:15:09 puppybits

안녕하세요! 어쩌면이 아이디어를 rAF 애니메이션에 사용하는 방법을 알고 있습니까? – thednp

enter image description here

나는 다음과 같은 발견했다 : 당신은 기능과 같은 두 개의 "핑퐁"로 RAF 기능을 변경하는 경우 을, 당신은 많이 덜 쓰레기를 얻을. 첫 번째 초기 "큰 GC"를 피할 수는 없지만 그 이후에는 700kb-1mb GC 대신 약 50kb의 보조 GC 만 표시됩니다. 코드는 다음과 같이 표시됩니다.

<script type='text/javascript' charset='utf-8'> 
    window.frameA = function() { 
    window.webkitRequestAnimationFrame(window.frameB); 
    }; 
    window.frameB = function() { 
    window.webkitRequestAnimationFrame(window.frameA); 
    }; 
    window.webkitRequestAnimationFrame(window.frameA); 
</script>

나는 Chrome에서 할 수있는 최선의 방법이라고 생각합니다. FF에서 gc 간격이나 메모리가 거의 변하지 않으므로 크롬 디버깅 관련 내용 (자세한 내용은 위의 링크 된 크롬 버그 보고서 참조)과 관련이 있습니다. 그러나 RAF를 배포 할 때 내 게임에서 개선 된 점을 발견했습니다. 일반 사용자 컴퓨터에서는 발생하지 않는 인공 GC없이 디버깅 할 수 있어야합니다.

출처

2014-04-17 09:39:56

나는 이것이 효과가 있다고 말하는 것에 충격을 받았다. 놀랍지 만, 당신이 이것을 어떻게 만들어 주는지 상상조차 할 수 없습니다.:) – Jaruba

나는이 작품을 보지 않고있다. – kevzettler

Kevzettler : 언제나 쓸데없는 해킹이었다. 이 브라우저를 테스트 한 브라우저 버전을 알려 주실 수 있습니까? 당신은 여전히 일반적으로의 GC 문제를 관찰합니까? 그에 따라 답변을 수정하겠습니다. –

requestAnimationFrame 가비지 수집

답변

관련 문제