웹브라우저 javascript 의 실행 과정(동기와 비동기)

javascript는 동기적일까, 비동기적일까? 라는 궁금증이 생겼다.

또한 javascript의 동작과정을 공부하면서 Eventloop가 정확히 어디 있는 것일까 궁금증이 생겼다.

javascript의 실행 과정을 간단히 정리해봤다.

 

(출처 : What Is The Javascript Event Loop? - DEV Community)

 

동작

1. Heap & Stack

- Heap 메모리에 동적 개체 등이 생성되고, 함수 코드들이 Stack에 쌓여 실행된다.

 

2. 외부 API ( Ajax, setTimeOut(), setInterval() 같은 Web API 등 )

- Stack에 요청들을 하나씩 처리하다가 외부 API 요청을 맞닥뜨린 경우

- 해당 API를 지원하는(브라우저 등) 런타임 환경에 요청하고 처리한것으로 한다.

  런타임 환경(브라우저 등)에 새로운 스레드가 생성되어 API 처리한다.

 

3. Queue

- API 반환 값을 Queue에 저장한다.

 

4. Eventloop

- Stack이 비게 되면 Queue 대기하는 요청을 Stack으로 옮겨준다. 

 

위치

Heap & Stack - 자바 스크립트 엔진

런타임 환경 - 웹 브라우저(크롬, 파이어폭스, 익스플로러 등) 프로그램과 Node.js 등이 될 수 있다.

 

브라우저에 자바스크립트 엔진이 내장되어 있다.

 

Javascript는 동기? 비동기?

코드가 Stack에 쌓여 순차적으로 실행되기 때문에 언어 자체는 동기적이다.웹 API 등을 호출할 때는 별도의 스레드가 생성되어 일을 처리하기 때문에 비동기적이다.

 

 

참고하면 좋은 사이트

[JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프 - 하나몬 (hanamon.kr)

자바스크립트와 이벤트 루프 : NHN Cloud Meetup (toast.com)

What Is The Javascript Event Loop? - DEV Community