자바스크립트 비동기 처리

싱글 스레드 방식

자바스크립트는 한 번에 하나씩 일을 처리하는 싱글 스레드 방식으로 작동합니다. 코드 한 줄을 실행할 때 다음 줄의 코드는 이전 코드가 끝날 때까지 대기하게 됩니다. 만약 코드상에서 무거운 작업이 있다면 그 이후 작업들은 먼저 있는 무거운 작업이 끝날 때까지 대기할 수 밖에 없습니다. 자바스크립트를 비동기적으로 처리하려면 싱글 스레드 방식의 자바스크립트 엔진만으로는 불가능 합니다. 이를 해결하기 위해 자바스크립트 엔진은 콜백 패턴을 사용합니다.

콜백 패턴

콜백 또는 콜백함수란 매개변수로 전달되는 함수를 의미합니다. 자바스크립트는 비동기 처리를 하기 위해 비동기로 처리 하고자 하는 함수를 매개변수에 담아서 자바스크립트 엔진 외부로 전달합니다. 이 때 엔진 외부는 호스트 환경에 따라 달라질 수 있습니다. 브라우저 환경을 예로 들면 WebAPI에 콜백함수와 호출 스케줄링이 전달 됩니다. 호출 스케줄링은 콜백함수가 언제 호출(실행)되어야 할지 계산하는 작업입니다. 자바스크립트 엔진은 매개변수로 비동기 함수를 전달 한 뒤 콜 스택은 즉시 해당 함수를 콜 스택에서 pop하고 다음 코드를 실행합니다. 그와 동시에 호스트 환경, 브라우저에서는 WebAPI에서 호출 스케줄링 작업을 독립적으로 처리 합니다.

태스크 큐와 이벤트 루프

호출 스케줄링 작업이 끝나고 콜백함수가 불려야 할 시기가 되었을 때 WebAPI는 태스크 큐에 콜백함수를 push합니다. 태스크 큐는 호출할 시기가 된 콜백들이 대기하는 곳입니다. 콜백 함수도 결국 자바스크립트 함수이기 때문에 자바스크립트 엔진, 즉 콜 스택에서 실행되어야 합니다. 태스크 큐에서 콜 스텍으로 콜백함수가 전달 되어야 하는데 이 때 이벤트 루프가 그 역할을 합니다. 이벤트 루프는 콜 스택이 완전히 비어있는지 확인하고 태스크 큐에서 우선순위에 따라 콜백함수를 콜 스택에 올리는 역할을 합니다. 콜백 함수는 결국 콜 스택이 모두 종료 된 후에 실행됩니다. 이러한 과정 때문에 호출 스케줄링에서의 시간은 최소 지연 시간만을 보장할 뿐 정확한 호출 시간을 보장하진 않습니다.

태스크 큐의 우선순위는 크게 두 가지로 마이크로 태스크 큐와 매크로 태스크 큐가 있습니다. 마이크로 태스크 큐는 ES6부터 나온 프로미스 객체의 콜백 함수들의 대기 공간입니다. 마이크로 태스크 큐가 매크로 태크스 큐 보다 우선순위가 높습니다.

콜백 패턴 활용

무거운 작업이 있을 때 해당 작업이 끝날 때 까지 다른 작업은 할 수 없습니다. 이를 block된다고 표현하는데 non-block을 위해 비동기 방식을 사용할 수 있습니다. 무거운 작업을 작게 쪼개 작은 단위의 작업을 콜 스택에서 수행하고 나머지 작업을 콜백으로 넘깁니다. 콜백으로 넘어갔기 때문에 콜 스택에서 대기하고 있는 나머지 작업들을 수행할 수 있게 됩니다.

 

참고자료 :

이벤트 루프와 매크로·마이크로태스크

이벤트 루프와 매크로·마이크로태스크

What the heck is the event loop anyway? | Philip Roberts | JSConf EU