[프론트엔드] 웹 페이지 랜더링에 관하여

 

브라우저의 큰 역할 중 하나는 HTML, CSS, Javascript파일들을 읽어내는 것이다. 이를 읽어내어 사용자에게 웹 페이지의 형태로 그려내는 것을 '랜더링'이라고 하며, 이 글에서는 랜더링의 과정에 대해 조금 더 구체적으로 서술해보고자한다. 

랜더링의 과정은 다음과 같다. 

 

1. 파싱

• 웹 브라우저는 HTML 파일을 받아서 이해하기 시작한다. 이 과정에서 브라우저는 코드의 문자열을 의미있는 요소로 분해하고 구조를 읽어낸다.

2. 토크나이즈

• 파싱 단계에서 HTML 문서의 문자열은 '토큰'이라고 하는 작은 부분으로 나누어진다. 각 토큰은 태그(예: <div>, <span>, <a> 등) 또는 내용(텍스트)을 나타낸다.

3. 렉싱

• 토크나이즈 과정을 통해 생성된 토큰들은 객체로 변환되어 문법적 의미를 가지게 됩니다. 이 객체들은 문서의 구조를 형성하는 요소가 된다.

4. DOM 생성

• HTML 문서의 모든 요소와 내용이 객체로 변환되면, 이 객체들을 사용하여 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 웹 페이지의 구조적 표현으로, 각 HTML 요소가 노드로 표현된다.

5. CSSOM 생성

• HTML에 DOM 트리가 있다면 CSS를 위한 CSSOM(CSS Object Model)또한 존재한다. 브라우저는 CSS 파일을 파싱하여 CSSOM을 생성한다. CSSOM은 DOM과 유사하지만 스타일 정보를 담고 있다.

6. 렌더링 트리 생성

• DOM과 CSSOM이 준비되면, 브라우저는 이 두 트리를 결합하여 '렌더링 트리'를 형성한다. 이 트리는 화면에 실제로 그려질 요소들만을 포함한다. 그렇기에 display: none으로 설정된 요소는 포함되지 않는다. 

7. 레이아웃

• 렌더링 트리가 완성되면, 브라우저는 각 요소가 화면의 어디에 위치해야 하는지 계산한다. 이 과정에서 요소의 크기와 위치가 결정된다.

8. 페인트

• 레이아웃 단계가 끝나면 실제로 요소를 화면에 그리는 '페인트' 단계가 시작된다. 이 단계에서는 텍스트 색상, 배경 이미지 등 세부적인 스타일이 적용된다.

리플로우와 리페인트

• 웹 페이지에서 요소의 크기나 위치가 변경될 경우, 브라우저는 레이아웃(리플로우)을 다시 계산해야 합니다. 단순히 스타일(색상, 투명도 등)만 변경되는 경우에는 해당 요소만 다시 그리는 리페인트가 발생합니다.

이처럼 웹 페이지 랜더링 과정에서 레이아웃과 페인트 단계가 분리되어 있는 이유는 효율성, 성능 최적화와 관련이 깊다. 예를 들어, 만약 레이아웃과 페인트가 동시에 처리된다면, 요소의 스타일 변경이 있을 때마다 위치와 크기 또한 재계산되어야 할 수 있다. 그러나 분리된 방식을 사용함으로서 웹 페이지 요소의 스타일 변경이 위치와 크기에 영향을 주지 않는 경우, 리페인트 과정만 따로 진행할 수 있게 됨으로서 브라우저는 불필요한 계산을 줄이고, 더 빠른 응답성과 랜더링 성능을 제공할 수 있게 되는 것이다.