우리는 requestAnimFrame을 응용 프로그램 루프에서 'yield'로 간주하여 이벤트 루프를 처리 할 수 ​​있습니까?

Question

내 프로그램의 메인 루프 내에서 내 캔버스 업데이트를 만들기 위해 자바 스크립트에서 requestAnimFrame method을 사용하고 있습니다 :

window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
})(); 


function animate() { 
    requestAnimationFrame(animate); 
//var runcount = 100; 
//for (var i=0;i<=100;i++) { 
    draw(); 
// if (runcount === i) 
//  alert("Completed program loop"); 
// } 
} 

무슨 일이 일어 났는지는 my program that only updated the canvas after my main loop had run for 100 반복 한 후 정지이었다. 내 프로그램의 모든 루프에 method above into my main loop, suddenly I get canvas updates을 추가 한 후

내 프로그램이 끝날 때까지 캔버스가 업데이트되지 않았다는 사실 때문에 캔버스 업데이트가 우선 순위를 얻지 못한 다른 스레드에서 실행되고 있다고 생각하게되었습니다. (그러나 우리는 그것을 알고있다 JavaScript is single-threaded).

내 질문 - 이벤트 루프가 처리하도록 requestAnimFrame을 응용 프로그램 루프에서 'yield'로 간주 할 수 있습니까? JavaScript가 여전히 단일 스레드라고 가정 할 수 있습니까?

Answer 1

당신은 당신의 반복을 1000 번 어떻게했는지에 대해서는 구체적이지 않지만, for 또는 while 루프를 사용하여 반복했다고 가정 할 것입니다.

for/while 루프를 수행하면 해당 루프 (또는 범위)가 완료 될 때까지 스크립트가 사용 중입니다. JS는 단일 스레드를 알고 있기 때문에 이벤트 대기열과 같은 것을 처리하는 동안이 작업을 처리 할 수 ​​없습니다. 따라서 루프가 완료 될 때까지는 아무 것도 업데이트 (DOM 포함) 할 수 없습니다 (일반적으로 브라우저 특정 예를 들어 DOM 업데이트가 별도의 스레드에서 실행되는 경우 DOM 업데이트를 허용하는 구현이지만 JS와는 별개입니다.

이제는 프레임에 대해 하나의 반복 작업을 수행했습니다. 즉, 루프에서 처리 한 코드가 잠시 동안 통화 중 루프를 수행하지 않는 한 브라우저가 이벤트 대기열 을 비동기 적으로 (다중 스레드와 동일하지 않음)으로 처리 할 시간이 있다는 것을 의미합니다.

setTimeout도 사용할 수 있습니다. rAF가 예를 들어 setTimeout 또는 setInterval과 다른 점은 모니터의 VBLANK 마침표 (비디오 카드가 vsync 옵션을 통해 종속되는 수직 블랭킹)와 동기화 할 수있는 타이머 메커니즘의 효율적인 저수준 구현이라는 것입니다. 즉 일반 단어는 모니터의 새로 고침 빈도 (일반적으로 60Hz)입니다. 이것은 우리가 부드러운 (어) 애니메이션을 만들 수있게 해 주었고, 이것이 request * Animation * Frame이라고 불리는 이유입니다. 이것이 주로 만들어 졌기 때문입니다.

JS가 여전히 단일 스레드입니까? 예, 변경되지 않습니다. JS에서 멀티 스레딩을 수행하는 유일한 방법은 웹 작업자를 사용하는 것입니다.

rAF가 변경 되나요? 이 영역이 아닌 - setTimeout에 대한보다 정확하고 효과적인 대안이며 다른 방식으로 동기화되지만 그게 전부입니다. 범위가 사용 중이면 setTimeout이 트리거 할 수없는 것과 동일한 제한 사항이 적용됩니다 (따라서 보증을 암시하지 않는 이름의 request * 부분). 그러나 트리거 할 때 모니터 새로 고침 빈도와 동기화됩니다.