jsperf 테스트 setInterval() vs requestAnimationFrame (

Question

) 누군가 turnEvenOld(250, 250) (0.089ms)이 turnEvent(250, 250) (0.447ms)보다 훨씬 빨리 실행되는 이유를 설명 할 수 있습니까?

나는 훨씬 빠르고 저렴이 setInterval()보다 실행 된 requestAnimationFrame()를 사용하여 생각?

하여 setInterval() :

var turnEventOLD = function turnEvent(AnX, AnY) { 
    ----VARIABLES---- 
    temp = setInterval(myAnimation1, 1000/60); 
    function myAnimation1() { 
     ----DRAWINGCANVAS------ 
     ----- 
     ----CONDITIONS-------- 
     if (one301 && one401) { 
      clearInterval(temp); 
     } 
    } 
} 

requestAnimationFrame() :

var turnEvent = function turnEvent(AnX, AnY) { 
    ----VARIABLES----- 
    function render() { 
     ----DRAWING CANVAS----- 
     ------ 
     ----CONDITIONS--------- 
     if (one301 && one401) { 
      ---stop requestAnimation-- 
     } 
    } 
    (function animloop(){ 
     ----CONDTION----- 
     requestAnimationFrame(animloop); 
     render(); 
    })(); 
} 

Answer 1

RequestAnimation 프레임은 반드시 setInterval을보다 "더 빨리"가 아닙니다. 그것은 실제로 다른 것을합니다. 페이지가 다시 칠 준비가 될 때까지 requestAnimationFrame가 대기하는 동안

setInterval을 밀리 초 주어진 수를 기다립니다. setInterval 호출 시간에 따라 setInterval 대기 시간은 다음 다시 칠 때까지의 시간보다 짧거나 길 수 있습니다.

당신이 페이지를 다시 그리기와 동기화에서 잠재적 인 대신 다음 다시 그리기 전에 시각적 요소를 변경 확실 있도록 애니메이션에 대한 requestAnimationFrame을 사용하는 것이 좋습니다.