웹에서 자바스크립트 구동 환경

자바스크립트가 싱글쓰레드로 동작한다는 것은 검색으로 쉽게 찾아볼 수 있는 내용이다.

내가 궁금했던 것은 싱글쓰레드가 어떻게 비동기로 동작하는가 이다.

답은 web apis로 실행되는 함수들은 별도의 환경에서 실행되기 때문에 우리의 싱글쓰레드는 영향을 받지 않는 다는 것이다.

web apis는 우리가 사용하는 웹 구동 쓰레드와는 별도의 프로그램 환경에서 실행되는 것을 알아야 한다.

web apis의 대표적인 기능으로 setInterval과 setTimeout, ajax 가 있다.

웹에서 자바스크립트 구동환경 구성

콜스택 콜백큐 이벤트루프 webapi

• 콜 스택은 하나의 작업을 완료하기 위해 제공되는 환경이다.
• 콜백 큐는 작업이 시작되기를 기다리는 장소.
• 이벤트루프는 콜 스택이 비어있음을 확인하면 콜백 큐로부터 작업을 가져와 콜 스택에 넣어 다음 작업을 실행하는 기능을 한다.
• web apis는 자바스크립트가 구동되는 환경과 별도로 작업하는 공간인데 콜 스택에 들어왔을 때 web apis에서 제공하는 함수를 사용한 경우 web apis가 동작하는 별도의 환경에서 실행되어 완료된 후(웹에서 사용하는 싱글쓰레드와 다른 환경이기에 비동기 작업이 가능한 것이다) 콜백 함수가 콜백 큐에 들어가 자기 차례를 기다리는 것이다.

여기서 재미있는 점은 비동기라는 것이 관점에 따라서 비동기일 수도 있고 아닐 수도 있어 보인다는 점이다.

(비동기라는 것은 원래 하나의 작업단위가 실행되는 콜 스택관점에서 서술하는 내용이라 생각한다. 이건 그저 개인의 넓은 관점에서 바라본 생각임)

콜 스택 관점에서 보면 비동기. 콜백 큐 관점에서 보면 동기처럼 보인다.

콜 스택은 web apis 작업을 만나면 비동기로 처리하지만 비동기 작업 후의 콜백 함수는 결국 순서를 기다리는 콜백 큐에 담기게 되기 때문이다.

setInterval 함수의 실행 시간을 0 으로 설정해서 실행해도 정확하게 바로 실행되지 않는 것을 보면 알 수 있다.

setTimeout(function () {

  alert(1);

}, 0)

alert(2);

위의 코드는 2를 먼저 출력하고 1을 출력한다.

다시 말해 콜백 함수가 호출되는 시점(콜백 큐에 들어갈 때)보다 앞서서 들어온 작업들이 콜백 큐에 대기하고 있다면 앞선 작업들이 모두 끝날 때까지 콜백 함수는 콜백 큐에서 대기하는 것과 같다.

콜백 큐 뿐 아니라 콜 스택 역시 비어있는 상태여야 실행 되기에 앞선 작업이 모두 끝나야만 콜백 함수가 실행될 수 있다.

작동 원리를 알고 개발한다면 좀 더 효율적인 프로그래밍을 할 수 있겠다.

참고로 dom 바인딩 이벤트 역시 web apis이기 때문에 클릭과 같은 이벤트 처리 역시 비동기 작업으로 진행된다.

너무 순식간에 실행되기 때문에 쉽게 알 수 없었지만 사실이다.

참고 

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=948s

http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/