브라우저 동작 원리 (브라우저 렌더링 과정)

프론트엔드 개발자가 꼭 알아야 하는 기본 지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 처음에는 알아야 한다고 하니 찾아봤지만 막상 왜 알아야 하는지 대해서 의문이 들었고 공부하는 김에 앞으로는 암기가 아닌 이해를 하기 위해서 앞으로 조금씩 글을 작성해 보려고 한다.

---

왜 알아야 할까?

자동차를 운전만 하는 사람은 자동차가 왜 움직이는지 어떻게 움직이는지에 대해서는 신경 쓸 필요가 없다.

하지만 자동차 엔지니어는 자동차를 수리하고 최대한 성능을 높여야 하기 때문에 어떤 부품이 있고 어떤 상호작용을 하는지 알아야 한다.

마찬가지로 프론트엔드 개발자 또한 웹사이트의 유지보수와 성능 최적화를 위해 브라우저의 기본구조와 어떻게 렌더링이 되는지에 대해 알 필요가 있다고 생각된다.

---

브라우저의 구조

 

위 번호는 순서가 아닌 표기를 위한 것

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청 페이지 부분을 제외한 모든 부분

2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이를 연결하여 동작을 제어

3. 렌더링 엔진 - HTML과 CSS를 파싱 하여 요청한 웹 페이지를 표시. 사용자가 페이지에 접속했을 때 보이는 뷰포트 안에 보이는 부분을 그리는 역할을 담당

4. 통신 - HTTP와 같은 네트워크 호출에 사용. CORS에 대한 부분도 담당

5. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행하는 Interpreter. JavaScript Engine 이라고도 함

6. UI 백엔드 - check box, button, input 등 기본적인 위젯을 그림

7. 자료 저장소 - Cookie, Local Storage와 같이 보조 기억장치에 데이터를 저장하는 역활로 BrowserEngine에서 접근이 가능

---

브라우저의 렌더링 과정

- 브라우저는 렌더링에 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 파일 등)를 서버에 요청하고 응답을 받는다.

 

[더 자세한 플로우]

- 사용자가 브라우저로 웹 사이트에 접속

- 브라우저는 DNS를 통해 서버의 IP주소를 파악

- 브라우저는 파악한 IP주소에 있는 서버와 3 Way Handshake 진행

- 3 Way Handshake가 완료되면 브라우저는 서버에게 데이터를 요청 (= HTTP Request)

- 서버는 데이터를 브라우저로 전달 (= HTTP Response)

 

- 렌더링 엔진은 응답된 HTML을 파싱하여 DOM Tree를 생성, CSS를 파싱하여 CSSOM Tree를 생성하고 둘을 결합하여 Render Tree를 생성한다.

- script 태그를 만나면 자바스크립트 엔진에게 권한을 넘겨 JavaScript 코드를 파싱 하여 AST(추상적 구문 트리)를 생성 후 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 Render Tree로 결합된다.

- Render Tree를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅 한다.

---

[Deep Dive]

Rendering Engine

각 브라우저는 각자 다른 렌더링 엔진을 가지고 있고, 렌더링 엔진의 목표는 아래와 같다.

- 웹 페이지 요소들을 Rendering

- 효율적인 Rendering을 위한 자료구조 생성

 

Critical Rendering Path / 렌더링 엔진의 동작 과정

DOM Tree 생성

- HTML을 파싱 하여 DOM Tree를 생성

- 어휘 분석을 통해 HTML5 표준에 지정된 고유한 토큰으로 변환. 브라우저의 렉싱 과정을 통해 토큰의 해당 속성과 규칙을 정의하는 노드 객체로 변환되며, 각 노드가 서로 연관성을 가질 수 있도록 Tree를 구축하는데 그것이 DOM Tree

 

CSSOM Tree 생성

- CSS를 파싱 하여 CSSOM(DOM이 어떻게 화면에 표시될지를 알려주는 역할) Tree를 생성

 

Render Tree 생성

- Rendering Engine이 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree 생성

- 화면에 표시되어야 할 모든 노드의 콘텐츠, 스타일 정보를 포함하는 트리

- meta, display:none 은 렌더와 상관이 없기 때문에 렌더 트리에 포함시키지 않음

 

Layout (Reflow)

- 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정

- 박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 그리고 위에 스타일 속성이 계산 (CSS에서 % 나 em 같은 상대적인 단위를 사용했을 때는 디바이스의 뷰포트에 맞춰서 픽셀 단위로 변환됨)

 

Paint (Repaint)

- 화면에 실제 필셀로 그려지도록 변환하는 과정 (Render Tree에 포함된 요소들이나 text, 이미지들이 실제 픽셀로 그려진다.)