[Javascript] 동기 처리 / 비동기 처리

 

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 

이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다.

함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다.

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

이는 동시에 2개 이상의 함수를 실행 할 수 없다는 것을 의미한다.

 

이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.

처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 

 

 

동기 처리

 

현재 실행 중인 테스크가 종료될 때까지 다음에 실행될 테스크가 대기하는 방식을 동기(synchronous)처리라고 한다. 

 

장점: 실행 순서가 보장된다.

단점: 앞선 테스크가 종료할 때까지 이후 태스크들이 블로킹 된다.

 

 

 

비동기 처리

 

반대로 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기(asynchronous)처리라고 한다.

 

장점: 블로킹이 발생하지 않는다.

단점: 실행 순서가 보장되지 않는다.

 

비동기 처리 방식 예 - setTimeout, setInterval, HTTP 요청, 이벤트 핸들러

 

 

 

브라우저에 내장된 자바스크립트 엔진은 싱글 스레드 방식으로 동작한다.

모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면 자바스크립트는 비동기로 동작할 수 없다.

즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다. 

 

브라우저는 자바스크립트 엔진 외에도 렌더링 엔진과 Web API를 제공한다.

Web API : DOM API와 타이머 함수, HTTP 요청과 같은 비동기 처리를 포함