브라우저 동작 원리

웹 애플리케이션 구동 과정

1. URL Entered: 사용자가 웹 브라우저에서 사이트 주소를 입력
2. DNS Lookup: DNS를 이용하여 사이트 주소에 해당되는 Server IP 접근
3. Socket Connection: Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결
4. HTTP Request: Client 에서 HTTP Header 와 데이터가 서버로 전송
5. Content Download: 해당 요청이 Server 에 도달하면 사용자가 원하는 문서를 다시 웹 브라우저에 전송
6. Browser Rendering: 웹 브라우저의 렌더링엔진에서 해당 문서를 다음과 같은 순서로 파싱

---

브라우저의 역할

사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에 표시한다.

주요 브라우저로는

• Google Chrome - Webkit
• Safari - Webkit
• Mozilla Firefox(Escape) - Gecko
• Microsoft Internet Explorer
• Opera

브라우저의 구조

UI

주소창, 즐겨찾기 등 사용자가 조작 가능한 영역

브라우저 엔진

UI와 렌더링 엔진 동작 제어

렌더링 엔진

요청된 자원을 화면에 표시

네트워킹

HTTP 요청과 같은 네트워크 호출

UI 백엔드

OS 사용자 인터페이스 방법을 활용하여 기본적인 위젯을 그림

자바스크립트 인터프리터

자바스크립트를 해석하고 실행

데이터 저장소

Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역

---

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시

브라우저	렌더링 엔진
IE	Trident
Chrome	Webkit
Safari	Webkit
Firefox	Gecko
Opera	Presto

렌더링 주요 동작과정 - Critical Rendering Path

브라우저가 HTML, CSS, Javascript 등의 파일을 변환하여 화면에 픽셀 단위로 나타내기 위해 거쳐야하는 일련의 과정

렌더링 최적화의 과정은 항상 측정을 먼저 하고 최적화를 진행해야 한다.

Main Flow

1. DOM Tree 생성
2. CSSOM 생성
3. Render Trre(DOM + CSSOM) 생성
4. Render Tree 배치
5. Render Tree 그리기

Parsing과 DOM Tree

Parsing

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

파싱 결과는 보통 문서 구조를 나타내는 Node Tree 이다.

파싱은 아래와 같이 두 가지로 구분할 수 있다.

• 어휘 분석(Tokenizing): 문서의 자료를 토큰으로 분해하는 과정
• 구문 분석: 언어의 구문 규칙을 적용하는 과정

DOM Tree 생성

• HTML의 내용과 속성을 Node로 갖고 각 Node의 관계를 나타내는 트리
• HTML 문서를 구조화 하여 스크립트 또는 프로그래밍 언어에서 접근 가능한 형태로 제공
• Conversiotn: 서버에서 HTML문서를 raw bytes(원시 바이트) 형태로 받아와 해당 파일의 인코딩에 따라 문자열 태그로 변환
• Tokenizing(토큰화): 변환된 문자열 태그를 토큰화를 통해 토큰으로 변환
• Lexing: 토큰을 다시 각각의 특성과 규칙을 정의한 객체 Node로 변환
• DOM Tree 생성: HTML마크업은 여러 태그 간의 관계를 나타내기에 DOM은 Tree 구조를 가진다. 따라서, DOM에 포함된 Node 또한 서로 관계를 가지게 된다. Node의 상대적인 관계를 이용하면 하나의 Node를 기준으로 모든 Node에 접근할 수 있다.

DOM 트리는 문서 마크업의 속성과 관계를 포함하지만, 렌더링되어 그려질 때는 CSSOM 이 관여한다.

---

CSSOM(CSS Object Model)

• DOM 생성과 마찬가지로 태그들을 토큰화, 토큰을 Node로 변환하여 CSS Object Model로 변환
• Cascading Style Sheets는 Body와 같이 페이지 구조상 상위에 있는 HTML 요소의 스타일이 하위 요소에 상속된다는 의미
• 브라우저가 모든 CSS를 파싱하고 처리할 때까지 페이지가 화면에 그려지지 않는다.

Render Tree

• DOM + CSSOM, DOM의 Node에 일치하는 CSSOM 규칙을 찾아 연결 Attachment
• 렌더링 트리에는 페이지를 렌더링하는 데 필요한 가시적인 Node만 포함된다. 따라서, 메타 태그나 스크립트 태그 같은 Node 또는 display : none 스타일이 지정된 Node 는 제외된다. visibility : hidden 스타일이 적용된 Node는 보이지는 않지만 공간을 차지하므로 렌더링 트리에 포함된다.
• Render Tree가 화면에 최종적으로 그려지는 내용이 된다.

Render Tree 배치(Layout)

• 브라우저가 화면에 그릴 Node와 해당 Node의 스타일을 계산하여 하나의 그룹으로 묶어서 Render Tree를 만드는 것
• Layout은 브라우저가 화면에 그리기 전에 각각의 Node들의 정확한 위치와 크기로 나타내기 위해 계산하는 과정이다. 이때, 모든 상대적인 값(%)은 절대적인 값 (px)로 변환된다.

Render tree 그리기

• Rneder Tree의 각 Node를 화면의 픽셀로 나타내는 작업

[Ref] Naver D2 : 브라우저는 어떻게 동작하는가?

[Ref] Poiemaweb : 브라우저 동작 원리

[Ref] 패스트캠퍼스 강의: 장기효님의 “Vue로 구현하는 PWA캠프”