브라우저 렌더링 과정 정리

 

브라우저 렌더링

 

자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 실행(HTML, CSS, 자바스크립트)된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 문서를 어떻게 해석하고 그리는지 파악한다면 클라이언트 사이드 자바스크립트 프로그래밍의 효율을 높일 수 있다.

 

브라우저 렌더링 과정

 

브라우저 렌더링 과정

 

웹 브라우저에서 URL을 입력하게 되면 서버 측에서 요청을 응답(웹 페이지, HTML, CSS, 자바스크립트)해준다. 서버로부터 요청받은 응답을 통해 렌더링 과정을 거치게 된다.

 

1. 1. 입력받은 URL 해석
2. 2. DNS 조회(도메인 ➡️ IP 주소, IP 주소 ➡️ 도메인)
3. 3. IP가 존재하는 서버로 이동
4. 4. ARP(주소 결정 프로토콜)를 통해 IP 주소(논리 주소)를 MAC 주소(물리 주소)로 변환
5. 5. TCP 통신을 통해 Socket을 Open(Socket Open을 통해 Data를 주고 받음)
6. 6. 서버에서 응답을 반환
7. 7. 브라우저 렌더링

 

위 과정에서 6번 7번 과정을 풀어쓰면 다음과 같다.

 

6번 서버로 받은 응답(HTML, CSS, 자바스크립트)을 브라우저 렌더링 엔진이 파싱 하여 DOM, CSSOM을 생성하고 둘을 결합하여 렌더 트리를 생성한다. 렌더 트리를 그리고 나면, 자바스크립트 엔진은 자바스크립트(응답 결과)를 파싱 해 AST(Abstarct Syntax Tree)를 생성해 바이트 코드로 변환 후 실행한다. 실행된 자바스크립트에서 DOM API를 통해 DOM, CSSOM을 조작할 수 있고 변경 내용은 다시 렌더 트리로 합쳐진다. 이때 완성된 렌더 트리를 통해 HTML의 레이아웃을 계산해 화면에 최종적으로 그리게 된다.

 

파싱과 Object Model 생성

 

HTML 파싱, DOM

 

응답받은 HTML을 화면에 렌더링 하기 위해서 HTML를 브라우저가 이해할 수 있는 자료 구조로 변경해야 한다. 이때 자료구조가 DOM 트리인데, DOM은 Document Object Model의 준말로 HTML 문서를 파싱 한 결과물이다.

 

HTML 파싱, DOM 생성

 

1. 1. 서버는 요청받은 HTML 파일을 읽어 메모리에 저장한 후(2진수 바이트) 인터넷을 통해 응답
2. 2. 서버가 응답한 2진수 바이트 형태의 HTML을 응답받고 meta tag의 charset 어트리뷰트에 지정된 인코딩 방식을 기준으로 문자열로 변환
3. 3. 문자열로 변환된 HTML을 문법적 의미를 갖는 코드의 최소 단위인 토큰(Token)들로 분해
4. 4. 각 토큰은 객체로 변환하여 노드(Node)를 생성. 토큰에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성. 이때 노드는 DOM을 구성하는 기본 요소
5. 5. 각 노드를 통해 트리 자료 구조 형태로 구성한다. 노드들로 구성된 자료 구조를 DOM(Document Object Model)이라 한다.

 

바이트 ➡️ 문자 ➡️ 토큰 ➡️ 노드 ➡️ DOM

 

CSS 파싱, CSSOM

 

앞선 내용의 DOM 생성 과정은 HTML을 위에서 아래로 읽으며 DOM을 순차적으로 그린다. CSS를 로드하는 link tag 혹은 style tag를 만났을 때 DOM 생성을 중단하고 CSSOM(CSS Object Model)을 그린다. CSSOM을 생성하는 과정은 HTML 파싱과 동일하고, CSSOM을 모두 그리고 나면 중단점 이후를 다시 실행한다.

 

바이트 ➡️ 문자 ➡️ 토큰 ➡️ 노드 ➡️ CSSOM

 

// 서버로 응답 받은 CSS 파일
body {
	font-size: 18px;
}

ul {
	list-style-type: none;
}

 

CSSOM은 CSS의 상속을 반영해 그려낸다. 위 CSS 파일을 상속해 CSSOM을 그려보면 다음과 같다.

 

CSSOM 생성

 

렌더 트리 생성

 

렌더 트리 생성

 

앞서 생성된 DOM과 CSSOM을 결합해 렌더 트리를 만든다. 렌더 트리는 렌더링을 위한 트리 형태의 자료구조로 HTML 노드의 레이아웃을 계산하는 데 사용되고 페인팅 과정에 입력된다.

 

 

• 자바스크립트에 의해 노드 추가/삭제
• 뷰포트 변경
• 레이아웃에 변경을 발생시키는 스타일 변경(margin, border, ...)

위와 같은 상황에서 레이아웃 계산과 페인팅이 재차 실행된다. 레이아웃과 페인팅이 재실행되는 '리 렌더링'은 빙용이 많이 발생해 성능에 악영향을 끼친다.

 

 

DOM API

 

HTML 파싱의 결과인 DOM은 HTML 요소와 스타일을 변경할 수 있는 DOM API를 제공한다. 자바스크립트 코드 상에서 DOM API 조작으로 DOM을 동적으로 조작할 수 있다. DOM을 생성하는 과정에서 script tag를 만나면 DOM 생성을 중단하고(CSSOM과 마찬가지로) 제어권을 브라우저 렌더링 엔진에서 자바스크립트 엔진으로 넘긴다. 

 

script tag 위치가 중요한데, DOM을 모두 그리기 전에 DOM API를 조작하는 코드가 자바스크립트 코드상에 존재한다면 동작 에러가 발생한다. DOM API로 HTML 요소에 접근하고자 하는데, DOM이 생성되기 이전에 실행되었기 때문에 문제가 발생하는 것이다. 

 

일전에 script 위치를 body 태그 내부에서 최하단에 작성해야 한다고 했었는데, 이번에야 이유를 알게 되었다.

 

리플로우, 리페인트

 

DOM API에 의한 리플로우, 리페인트

 

DOM API의 조작으로 DOM, CSSOM이 변경된다. 변경이 된 후 다시 렌더 트리를 그리는 과정을 거치고 화면에 렌더링 된다. 

 

• 리플로우 : 레이아웃을 다시 계산하는 행위
• 리페인트 : 재결합된 렌더 트리를 기반으로 페인트를 다시 하는 행위

 

레이아웃의 변화가 있는 경우

✓ HTML 요소의 추가/삭제

✓ 요소의 크기 변경/위치 변경

✓ 뷰포트 변경

 

레이아웃의 변화가 있는 경우만 리플로우가 발생한 후 리페인트 과정을 거친다. 레이아웃을 다시 계산하는 경우가 아닐 땐 리페인트만 동작한다.

 

---

 

이 내용은 '모던 자바스크립트 Deep Dive' 책을 보고 공부한 내용을 다시 정리한 것입니다.

script tag의 async/defer 어트리뷰트는 이해가 부족해 추후에 다시 공부하여 작성할 계획이다.

 

 

참고

 

 

[TIL] 2022-03-22 / 2일차

 

Javascript Environment | PoiemaWeb

모던 자바스크립트 Deep Dive - 이웅모 저자