캔버스 라인 애니메이션을 사용한 성능 저하

Question

나는 웹 사이트의 일부 라인 animatin에 requestAnimationFrame을 사용하고 있습니다. 문제는이 애니메이션이 프로세서의 사용을 심각하게 증가시키고 애니메이션이 부드럽 지 않다는 것입니다.

때때로 CPU 사용량의 보다 70 % 이상이다.

애니메이션 또는

function animateline() { 
    reqAnimFrame = 
    window.requestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    window.oRequestAnimationFrame; 

    reqAnimFrame(animateline); 

    x += speed; 

    if (x <= 0 || x >= 475) { 
    speed = -speed; 
} 
    reposition(); 
} 

전체 코드는 여기 http://jsfiddle.net/a4cNp/46/

페이지의 전체 화면 버전 라인

의 재배치 경우 나도 몰라

->http://jsfiddle.net/a4cNp/46/show/light/

감사합니다 미리.

Firefox 프로필러 이미지가 추가되었습니다. 어쩌면 문제의 위치를 ​​알아내는 것이 유용 할 수도 있지만 문제 해결 방법을 아직 모릅니다. @GameAlchemist가 말한대로

Answer 1

, 코드의 상단에 대신 애니메이션 내부에 한 번 polyfill을 넣어. 애니메이션 루프는 초당 여러 번 호출되므로 루프의 작업량을 최소화하십시오.

하나의 관찰 : 당신은 너무 많은 jQuery 선택을하고 있습니다.

var $area1=$("#area1"); 
var $area2=$("#area2"); 
var $area3=$("#area3"); 
... 
var area1Width=$area1.width(); 
var area1Height=$area1.height(); 
... 

이 그런 다음 often-에 캐시 된 값을 사용

번 코드의 상단에이 작업을 수행합니다 :

첫째, jQuery를 사용하면 자신의 크기에 따라 위치를 변경할 객체 캐시

function reposition(){ 

    $area2.css("left", area1Width+40); 

    ....