배보다 배꼽이 더 큰 Event Loop 이해 (feat. 브라우저, 런타임, 자바스크립트 엔진)

 

🍎 소개

---

Event Loop를 이해하기 위해 훨~씬 더 큰 범위의 브라우저에 대해 이해하고 넘어가는 시간이었다. 흩어져 있던 조각들이 한 곳에 모인 느낌이랄까…?

나만 이런 건지는 모르겠지만… 어릴 때부터 빨리, 많이 외워야할 단어나 개념들을 A4 용지에 꾸겨 넣은 후 한눈에 보면 정말 빨리 외워졌다. 이번에 흩어진 개념을 한 데로 모을 때 모든 영역을 한눈에 그리면 이해가 더 잘될 것 같다는 생각에 그려보았다. 이 글을 읽는 분들에게도 도움이 되었으면 좋겠다.

 

 

🍎 퍼즐 모으기

---

우선 브라우저는 html, css, javascript, static (img와 같은) 파일들을 다운받아와 화면상 보여주는 소프트웨어라고 정의할 수 있겠다. 지금 당신이 이 글을 읽으며 사용하는 그 Chrome! 또한 브라우저이다.

여러 포스팅에서 아주 잘 설명해주고 있지만, 모든 설명 하나의 뷰로 모아 그 이해를 토대로 그린 그림을 그려 보았다.

top-down 순서로 하나 하나 살펴보자.

 

 

🍎 브라우저 구조?

---

우선 최상단에 그림을 먼저 보자. 그림에서 예제로 든 Chrome 브라우저는, 브라우저 엔진으로 Chronium을 쓰고, 런타임 엔진으로 V8, 렌더링 엔진으로 (Blink - Webkit와 같은 뿌리를 둔 엔진)을 사용한다. 이렇게 브라우저는 여러 엔진들로 구성된 것을 확인할 수 있다.

각 엔진의 역할을 살펴보면,

• User Interface (사용자 인터페이스): 뒤로가기, 앞으로 가기 버튼, 북마크버튼 등 사용자가 요청한 페이지를 제외한 모든 부분을 지칭한다
• Browser Engine (브라우저 엔진): User Interface와 렌더링 엔진 사이 동작을 제어하는 엔진이다
• Rendering Engine (렌더링 엔진): 요청한 자료를 보여주는 엔진이다. HTML 요청을 받아오면 그냥 보여주면 되는 것 아니야?!라고 생각할 수 있지만, 받아온 HTML 파일을 화면상 보여주기 위해선 파싱과정을 거친다. <<**링크추가>> 포스팅에 정리 해두었다.
• Networking (통신): Http 요청과 같은 네트워크 호출 (DevTools > Network)
• UI Backend (UI 백엔드): 기본적인 위젯을 그림. eg. 콤보박스
• JavaScript Interpreter (자바스크립트 해석기): 자바스크립트 코드를 기계어로 파싱하고 실행
• Data storage (자료 저장소): 브라우저가 지원하는 저장소. e.g. 쿠키, localStorage, IndexedDB 등 을 지원

 

🍎 런타임 환경?

---

이제 down 하위 단계로 내려가 런타임 엔진 (런타임 환경)를 봐보자. 이 환경은 이벤드들을 스케쥴링하는 역할을 한다.

• JavaScript Engine: 이어지는 파트에서 자세히 알아보자.
• Web APIs: 브라우저에서 제공해 주는 플러그인? 개념으로, 개발자가 개발을 쉽게 할 수 있도록 제공해주는 객체 (인터페이스)이다. Web APIs가 반환하는 콜백함수가 있다면, 차례대로 태스크 큐(Callback Queue, Job Queue)에 추가된다.
  
  • 사용처:
    • 브라우저에 로드된 문서 조작 (document.querySelector..)
    • 웹페이지 일부 업데이트 (XMLHttpRequest 사용 AJAX)
    • 그래픽 요소 웹페이지게 그리기 (canvas)
    • 웹페이지에서 오디오 및 비디오 작업 (AudioContent)
    • 웹 저장소 (Window.sessionStorage, Window.localStorage)
    • 타임아웃( Window.clearInterval, Window.setInterval, Window.setTimeout)
  •  특징
    • Entry point가 항상 존재한다. 위 예제에서 document, XMLHttpRequest, AudioContent, Window 이 바로 entry point.
    • 이벤트를 사용해 상태를 변경한다. onload, click 등 이벤트를 감지한다.

• Callback Queue (Macro task queue): Web Api 중 setTimeout, setInterval, I/O tasks, setImmediate 이 반환한 콜백 함수가 대기하는 공간이다.
• Job Queue (Micro task queue): es6에 promise가 새로 추가되면서 등장한 큐. *promise, process.nextTick 등의 콜백 함수가 대기하는 공간이다. (*process.nextTick: process.nextTick 액션의 실행을 이벤트루프의 다음 차례까지 연기해 주는 메서드)
• Event Loop: 호출 스택과 콜백 큐를 계속 주시하고 있는 장치이다. 호출 스택이 비어있으면 콜백 큐에 들어온 콜백 함수들을 순서대로 호출 스택에 다시 넣는다. 호출 스택으로 이동된 콜백 함수는 다시 차례대로 실행된다. 우선순위가 높은 Job Queue 내 태스크가 추가된 후 모두 완료되면, 이후 Callback Queue의 태스크를 순서대로 추가한다.

 

🍎 자바스크립트 엔진?

---

• 자바스크립트 엔진
  • 인터프리터: 자바스크립트 언어를 한 줄씩 읽고 실행한다.
  • 컴파일러: 자바스크립트는 인터프리터 언어지만, 최신 브라우저 환경에서는 자바스크립트 코드를 실행할 때 이진수로 변환하는 JIT(Just-In-Time) 컴파일 과정을 거친다. (참조)
  • 메모리 영역
    • Code area: 실행할 JS 코드 저장되는 곳
    • Memory Heap: 객체 (참조값)들이 저장되는 메모리 창고 + 메모리 할당을 담당함. 그렇기에 가비지 컬렉터가 항상 관리하는 곳임.
    • Call Stack: 함수의 실행 문맥이 순서대로 쌓이는 스택. 스택 내 최상단 실행 문맥을 시작으로 return 문 실행 시 pop 후 그다음 문맥 실행. (*실행 문맥: 엔진이 함수를 실행하기 위해 가지고 있어야 하는 정보들. 변수(지역변수|원시값|참조값이 저장된 주소값), scope, this 이런 정보들을 담은 객체)

 

🍎 자… 그래서 이벤트 루프가 왜 중요한데?

---

앞서 자바스크립트 언어는 단일 스레드, 즉 한 번에 하나의 태스크밖에 처리하지 못하는 언어이다. 따라서…

• 엄청난 시간을 필요로 하는 실행문 (api 요청, 이미지 프로세싱)의 경우 동기적으로 처리 시 그다음 함수가 실행될 수 없어 그동안 브라우저의 모든 동작이 멈출 수 있다
• 이를 모르는 사용자가 버튼을 여러 번 클릭한다면 모든 요청이 끝난 후 이 요청을 순차적으로 실행하여 웹이 정상적으로 동작하지 못한다

이 단일 스레드 언어의 단점에서 바라본다면, Web Api가 반환한 콜백 함수를 우선순위에 맞게 호출 스택으로 전달해준다는 측면에서 이벤트 루프는, “싱글 쓰레드 언어의 제약에서 벗어나 브라우저의 멀티 쓰레드 환경을 이용할 수 있게 도와주는 도구”라는 의미가 있겠다! 땅땅땅

 

 

 

 

 

 

참고자료:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

https://developer.mozilla.org/ko/docs/Glossary/Call_stack

https://web.dev/howbrowserswork/

https://dev.to/sanderdebr/a-brief-explanation-of-the-javascript-engine-and-runtime-2idg

호출 스택, Web APIs, Callback Queue, Event Loop 동작 순서 시뮬레이팅 영상. 11분부터