Velocity.js + SVG 성능 문제

Question

계속 깜박이는 ~ 20 점을 만들어야합니다. 성능상의 이유로 Velocity.js + SVG를 선택했습니다. 결과 (애니메이션이 원활하게 실행 됨)에 만족하면 CPU/GPU 과부하에 대해 혼란스러워합니다.

var i = 0; 

setInterval(function() 
{ 
    if(i > 9) i = 0; 

    var radius = $('#dot' + i).data('r'); 

    $('#dot' + i) 
    .velocity({ opacity: 0.2 }, { duration: 500, queue: false }) 
    .velocity({ r: 4 * radius }, { duration: 500 }) 
    .velocity({ r: radius }, { duration: 500 }) 
    .velocity({ opacity: 1.0 }, { duration: 600 - 15 * radius }); 
    i++; 

}, 500); 

SVG 개체 : 연속 플레이와 CPU 온도의

<svg width="700px" height="200px"> 
    <circle cx="100" cy="100" r="5" data-r="5" class="dot" id="dot0"/> 
    <circle cx="150" cy="100" r="13" data-r="13" class="dot" id="dot1"/> 
    <circle cx="200" cy="100" r="3" data-r="3" class="dot" id="dot2"/> 
    (...) 
</svg> 

5 분 150까지 여기 간다

이 질문의 목적을 위해 단순화 된 코드 조각 ( http://codepen.io/anon/pen/NPjLVq?editors=101)입니다 %. OS X Yosemite 10.10에서 Chrome 39 (64 비트)를 사용하고 있습니다.

캐싱 선택기와 Velocity.js 시퀀스로 조작하는 것이 도움이되지 않았습니다.

Chrome의 Timeline Tool로 메모리 누수를 발견하려고했지만 헛된 일이었습니다.

그런 간단한 애니메이션으로 인해 노트북이 화끈 거려지는 이유는 무엇입니까?

Answer 1

1. 접근 대신 매우 빠른 방법으로 SVG/DOM을 조작하는 SMIL

, 당신은 SMIL의 사용을 만들 수 있습니다. SMIL을 사용하면 DOM과 상호 작용할 필요없이 간단한 애니메이션을 정의 할 수 있습니다.

애니메이션은 다음과 같이 할 수 있습니다

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" /> 

    <animate 
    xlink:href="#my-circle" 
    attributeName="cx" 
    from="50" 
    to="450" 
    dur="1s" 
    begin="click" 
    fill="freeze" /> 

(출처 : http://css-tricks.com/guide-svg-animations-smil/)

나는이 극적으로 CPU의 부하를 줄일 것이라 생각합니다.

실제로 CPU로드를 유발하는 DOM을 항상 새 값으로 설정하고 있습니다. "실제"애니메이션을 정의하는 것이 훨씬 더 효율적입니다.

2. 접근법 : setInterval을

를 사용하지 마십시오 그것은 당신이 setInterval을 사용하여 높은 부하를 일으키는 것도 가능하다. 500ms 안에 다시 기능을 호출하므로 (여전히 실행 중이더라도).