[ 면접 준비 ] 브라우저의 렌더링 원리

 

브라우저의 주요 역할은 두 가지입니다.

1. 사용자가 보고자 하는 자원을 서버에 요청하는 역할
2. 서버로부터 받은 응답을 화면에 출력해 사용자에게 보여주는 역할

그렇다면 어떻게 이 역할을 수행하는지 알아보는 게 이번 질문의 핵심일 것입니다.

---

1. HTML 파싱 그리고 DOM 생성

사용자가 어떠한 웹 주소를 검색창에 입력하고 엔터를 누르면, 브라우저는 해당 요청을 서버에 전달합니다.

그리고 서버는 가장 먼저 HTML 문서를 전달해 줄 거예요.

하지만 브라우저는 HTML 문서만으로는 어떤 내용인지 이해하지 못합니다.

그래서 해석하는 과정이 필요하게 되는데, 이때 그 과정을 파싱이라고 부르게 됩니다.

 

그리고 파싱이 끝나면 브라우저가 이해할 수 있는 어떠한 형태가 나올텐데,

그 어떠한 형태를 DOM( Document Object Model )이라고 부릅니다. 

 

2. CSS 파싱 그리고 CSSOM 생성

서버가 보내주는 HTML 문서에는 HTML 코드 뿐만 아니라 CSS, JavaScript의 코드도 섞여있을 수도 있죠.

브라우저는 위에서 부터 해석을 해오다가 CSS와 JavaScript 코드를 만나면 해석을 멈춥니다.

그 중, CSS 코드를 만난다면 CSS를 파싱해 CSS만의 DOM을 생성하게 됩니다.

그리고 그것을 CSSOM ( CSS Object Model )이라 부릅니다.

 

3. JavaScript 파싱 그리고 실행

JavaScript 코드 또한 파싱되어 AST라는 추상적 구문 트리가 생성됩니다.

그런 뒤, 인터프리터가 해석할 수 있도록 바이트코드를 생성하여 실행합니다.

 

JavaSciprt 코드의 실행으로 HTML과 CSS 코드의 내용이 바뀔 수 있는데,

그 때는 새롭게 DOM 또는 CSSOM이 생성되며 리렌더링이 됩니다.

 

4. 화면 생성

위 3가지 과정을 마친다면, DOM, CSSOM이 남아있게 됩니다.

이 두 개의 돔은 서로 합쳐지게 되는데, 그것을 렌터 트리라고 부릅니다.

그리고 렌더 트리의 노드를 배치하고 ( layout ), UI를 그리고 ( paint ), 순서대로 구성 ( composition )하는 과정이 끝나면,

사용자는 원했던 화면을 볼 수 있게 됩니다.

---

사용자가 어떤 주소를 입력하면, 브라우저는 그 요청을 서버로 전송합니다.
그리고 서버는 해당 주소의 HTML 파일을 브라우저에 제공하게 됩니다.
브라우저는 해당 HTML 파일을 파싱해 DOM을 생성하고, 그 안의 CSS 코드를 파싱해 CSSOM을 생성하고,
자바스크립트 코드를 파싱해 DOM과 CSSOM을 변경시킵니다.
그리고 마지막으로 DOM과 CSSOM이 합쳐지며 하나의 렌더 트리가 생성되고,
이 렌더 트리를 배치하고 그리고, 구성하면 사용자는 원하는 화면을 볼 수 있습니다. 

 

출처

[JavaScript]　브라우저 렌더링 과정(원리)