JavaScript 비동기 프로그래밍 소개 및 setTimeout 최소값

Callback 함수를 호출 할 때 

Node.js 에서는 process.nextTick을 사용하지만

참고: JavaScript 콜백 함수의 활용




클라이언트 JavaScript에서는

전통적인 setTimeout을 이용하여 Event Loop을 지연합니다.

 

위 그림과 같이 JavaScript 는 Event Loop ( 이벤트 루프 )을 사용하는데요.

Thread 와 달리 정확하게 말해서 완전 동시에 일을 할 수 없기 때문에

다음 일을 미루어 줌으로써 block이 되지 않게 하는 것이 포인트입니다.

그냥 단순 타이머로써 setTimeout 을 활용할 수도 있지만

callback 함수를 setTimeout을 통해 호출함으로써 이벤트를 지연할 수 있고 따라서 프로그램이

block 되지 않게 할 수 있습니다.



이것이 기본적인 Asynchronous Programming ( 비동기 프로그래밍 ) 입니다. 


Ex)

var example = function(callback) {    
    // Do some work    
    if (callback === 'function') {        
        setTimeout(function() { callback(); }, 10);    
    }
};



example(function() {    
    alert('example work is done');
});

---

Event Loop ( 이벤트 루프 )을 사용하는 JavaScript 같은 경우에는 이런 프로그래밍을 해줌으로써

JavaScript로 여러가지 일을 할 때에도 다른 이벤트를 받아들일 수 있어 사용자가 느끼기에

더 쾌적하고 빠르게 느껴집니다.

※  Node.js 의 경우 setTimeout 대신

process.nextTick(function () {
    // Do some work
});

process.nextTick 함수를 이용하면 됩니다.

참고: process.nextTick vs setTimeout 성능 벤치마크



하지만 브라우저 마다 JavaScript엔진이 다르고

버전마다 또 다르다보니 setTimeout 최소값이 궁금해서 찾아보았습니다.



확인 결과




하위버전 호환성을 위해서는 최소값을  10ms

HTML5 지원 브라우저만 생각한다면  최소값을  4ms



 

참고: Mozilla Developer Network -  window.setTimeout