동기 (Synchronous)와 비동기(Asynchronous)

동기(Synchronous)

• 요청과 결과가 한자리에서 동시에 일어난다는 약속, 요청을 하면 시간이 얼마나 걸리던지 요청한자리에서 결과가 주어져야한다.
• 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 요청이 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다.

비동기(Asynchronous)

• 요청한 결과가 동시에 일어나지 않을거라는 약속.
• 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.

자바스크립트는?

자바스크립트 엔진은 단하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며 동시에 2개이상의 함수를 동시에 실행할 수 없다는 것을 의미한다.

⇒ 동기적 언어이다.

그런데 브라우저에서 Javascript가 어떻게 화면전환하면서 여러 요청이나 이벤트를 동시에 동작을 할 수 있는가?

• 자바스크립트 엔진은 싱글스레드 방식이지만 브라우저는 멀티스레드로 동작한다.
• 브라우저는 자바스크립트 엔진외에도 렌더링 엔진과 WEB API를 제공한다. WEB API는 ECMA Script사양에 정의된 함수가 아니라 브라우저에서 제공하는 API이며, DOM API, 타이머 함수 HTTP요청과 같은 비동기 처리를 포함한다. 브라우저와 자바스크립트 엔진이 협력하여 비동기 함수(ex. setTimeout)를 실행.

위에서 말한대로 자바스크립는 비동기처리를 위해 호스트 환경이 제공하는 여러 함수를 사용하면 비동기(asynchronous)동작을 스케줄링 할 수 있습니다.