Q. 브라우저 렌더링 원리에 대해 설명해보세요.
브라우저는 HTML, CSS, JavaScript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진이 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 둘을 결합해 렌더 트리를 생성합니다. 브라우저의 JavaScript 엔진은 서버로부터 응답된 JavaScript를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행합니다. JavaScript는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고, 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅 합니다.
Q. 이벤트 루프에 대해 설명해보세요.
JavaScript는 싱글 스레드로 동작합니다. 하지만 브라우저가 동작하는 것을 보면 많은 태스크가 동시에 처리되는 것처럼 느껴집니다. 이처럼 JavaScript의 동시성을 지원하는 것이 이벤트 루프입니다. JavaScript 엔진은 순차적으로 task가 쌓이는 Call Stack과 동적으로 생성된 객체가 저장되는 메모리 공간인 Heap 영역 두 가지로 구분할 수 있고, Call Stack에 push된 task가 setTimeout 등의 비동기 작업이라면, Web API 영역으로 위임되어 처리됩니다. 콜백 함수는 이벤트 루프를 통해서 Task Queue로 넘어가고, Call Stack에 쌓여있는 task가 없을 때, Task Queue에 대기하고 있던 콜백 함수를 Call Stack으로 이동하는 방식으로 동작합니다.
