참고자료: 모던 자바스크립트 Deep Dive, 엘리 Dream Coding(https://www.youtube.com/watch?v=tJieVCgGzhs&t=907s)

💪🏻프론트엔드 개발자 단골 면접 질문

• 브라우저 렌더링 원리에 대해서 설명해보세요.

⛳ 오늘의 목표

HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 알아보기

• 파싱(parsing): parse(분석하다)
• 리소스란: resource(재료, 자산)
• 렌더링이란?: render(만들다)
• 웹 브라우저란?: browse(둘러보다, 인터넷을 돌아다니다.)

프론트엔드 개발자와 떼려야 뗄 수 없는 것은 브라우저다. 그렇기에 이제부터 본격적으로 브라우저의 렌더링에 대해서 알아보겠다.

브라우저의 렌더링 수행 순서 요약

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.