[JavaScript] 웹 브라우저 동작원리 (feat. 이벤트 루프)

웹 브라우저 동작원리

자바스크립트 엔진 (JavaScript Engine)

• wWebkit, V8, ...
• 자바스크립트 코드를 해석하고 실행하는 인터프리터
• 힙(Heap) + 호출 스택(Call Stack)
• 힙은 메모리 할당이 일어나는 부분 (변수, 객체 등이 저장되는 일종의 창고)

호출 스택 (Call Stack)

• 코드를 실행해주는 공간
• 함수가 호출되는 순서대로 쌓이는 스택
• 함수 실행 시 호출 스택에 해당 함수를 집어넣음
• 함수 return시(함수 실행이 끝나면) 호출 스택의 맨 위에 있는 함수 out

자바스크립트는 싱글 스레드(single-thread)다!
싱글 스레드 언어란, 호출 스택(Call Stack)을 하나만 사용하기 때문에 동시에 하나의 함수만 처리할 수 있다.

웹 브라우저 (Web Browser)

Web APIs

• 자바스크립트 비동기 메서드가 해당된다.
  ex. DOM 메서드, ajax(XMLHttpRequest), setTimeout, 이벤트 리스너 ..
• Web API 메서드는 작동이 마치면 콜백 큐(Callback Queue)에 들어가서 실행을 대기한다.

  ❓ 자바스크립트는 싱글 스레드인데 어떻게 비동기 처리를 할 수 있나?
  👉 Web API가 비동기 코드 동작을 수행한다 !
  자바스크립트는 웹 브라우저 혹은 Node.js의 자바스크립트 엔진에 의해 실행된다. 자바스크립트 엔진은 싱글 스레드이기 때문에 동기적 처리만 가능하지만, Web API에서 시간이 오래걸리거나 사용자의 이벤트를 기다려야 하는 코드, ajax로 http요청 하는 등 시간을 소요하는 작업을 수행하는 공간이다.

콜백 큐 (Callback Queue)

• Web API의 콜백 함수들이 대기하는 큐.

🔄 이벤트 루프 (Event Loop)

• 호출 스택과 콜백 큐를 계속 주시하고 있다.
• 호출 스택이 비어있으면, 먼저 들어온 순서대로 콜백 큐에 있는 콜백 함수들을 호출 스택으로 집어 넣는다.